Site header

Sent

Trash

Settings

Log out

You could use this kind of component for a header on your website or web app.

The typical method for building this component would be to wrap the logo and nav buttons inside of one element, and the “Settings” and “Log out” buttons inside another element. And then you would use float to push one container to the left, and the other container to the right. And then you would need a clearfix on the site header itself. That’s a lot of rigamarole for a simple layout!

With flexbox, you still need the container elements, but you don’t need special classes for these containers since flexbox puts the parent in charge of the layout.

Our trusty display: flex property is at work here, but a couple other flexbox properties further adjust the layout:

justify-content: space-between pushes the child elements are far away from one another as possible. This pushes the logo and nav buttons left and the settings button right.
align-items: center centers all of the children elements vertically along the main axis within the containers themselves. This is important because the logo and nav buttons are of different heights. Without setting this property, they would align to their top edges by default.

CSS

.siteHeader {
  /**
   * Lay out the children of this container with
   * flexbox, which is horizontal by default.
   */
  display: flex;

  /**
   * Make the container put as much space as possible
   * between its children, with the children at either
   * end laying flush against the container's edges.
   */
  justify-content: space-between;

  padding: 10px;
  background-color: #56727C;
}

  .siteHeader__section {
    /**
     * Lay out the children of this container with
     * flexbox.
     */
    display: flex;

    /**
     * Align the children in the center, along
     * the main axis. By default the children will
     * align along their top edges.
     */
    align-items: center;
  }

    .siteHeader__item {
      padding: 5px 15px;
      font-size: 12px;
    }

    .siteHeader__item + .siteHeader__item {
      margin-left: 5px;
    }

    .siteHeader__item.is-site-header-item-selected {
      color: #FFFFFF;
      background-color: #415F69;
      border-radius: 4px;
    }

    .siteHeaderLogo {
      font-size: 20px;
      line-height: 0;
      color: white;
    }

    .siteHeaderButton {
      cursor: pointer;
      color: #D9E9EF;
    }

HTML

<div class="siteHeader">
  <!-- This section gets pushed to the left side-->
  <div class="siteHeader__section">
    <div class="siteHeader__item siteHeaderLogo">
      <div class="fa fa-inbox"></div>
    </div>
    <div class="siteHeader__item siteHeaderButton is-site-header-item-selected">Inbox</div>
    <div class="siteHeader__item siteHeaderButton">Sent</div>
    <div class="siteHeader__item siteHeaderButton">Trash</div>
  </div>
  <!-- This section gets pushed to the right side-->
  <div class="siteHeader__section">
    <div class="siteHeader__item siteHeaderButton">Settings</div>
    <div class="siteHeader__item siteHeaderButton">Log out</div>
  </div>
</div>

JavaScript

/* eslint-disable */

var $siteHeaderItems = $('.siteHeader .siteHeader__item');

$siteHeaderItems.click((event) => {
  var selectedClass = 'is-site-header-item-selected';
  $siteHeaderItems.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.