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

May 3, 2016
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 {
   * 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>