【CSS】フレキシボックスを使った素晴らしいUI。Flexbox Patterns

Flexbox PatternsはCSSフレキシボックスを使用して、素晴らしいUIを構築。

フレキシボックスを使用した実施例を紹介されています。

  1. Stepper input
  2. Tabs
  3. Site header
  4. Form footer
  5. Side bar
  6. Centered prompt
  7. Centered icon
  8. Feature list
  9. Card
  10. Card group

Tabsのページにはこのように書かれています。

Tabs

.tabs {
/**
* Setting display to flex makes this container lay
* out its children using flexbox, the exact same
* as in the above "Stepper input" example.
*/
display: flex;
border-bottom: 1px solid #D7DBDD;
}
.tab {
cursor: pointer;
padding: 5px 30px;
color: #16A2D7;
font-size: 12px;
border-bottom: 2px solid transparent;
}
.tab.is-tab-selected {
border-bottom-color: #4EBBE4;
}
<div class="tabs">
<div class="tab is-tab-selected">Tab 1</div>
<div class="tab">Tab 2</div>
<div class="tab">Tab 3</div>
<div class="tab">Tab 4</div>
</div>
 
Flexbox Patterns

【CSS】フレキシボックスを使った素晴らしいUI。Flexbox Patterns

  • LATEST
  • RELATED
  • POPULAR