Flexbox Patterns
by CJ Cenizal

Tabs

Tab 1
Tab 2
Tab 3
Tab 4

Simply using display: flex is pretty versatile. These tabs are laid out the exact same way as the Stepper Input example.

CSS
.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;
  }
HTML
<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>
JavaScript
/* eslint-disable */

var $tabs = $('.tabs .tab');

$tabs.click(function(event) {
  var selectedClass = 'is-tab-selected';
  $tabs.removeClass(selectedClass);
  $(event.target).addClass(selectedClass);
});
More stuff
If you like my writing you can find more at my blog, cenizal.com. Right now I'm mostly writing about people management, software engineering, and interaction design.