A simple example of Flexbox in action

How to use Flexbox CSS / Tutorial

The CSS3 Flexible Box, or flexbox, is a layout mode providing for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen sizes and different display devices.

For many applications, the flexible box model provides an improvement over the block model in that it does not use floats, nor do the flex container's margins collapse with the margins of its contents.

Many designers will find the flexbox model easier to use. Child elements in a flexbox can be laid out in any direction and can have flexible dimensions to adapt to the display space. Positioning child elements is thus much easier, and complex layouts can be achieved more simply and with cleaner code, as the display order of the elements is independent of their order in the source code.

This independence intentionally affects only the visual rendering, leaving speech order and navigation based on the source order.

CANIUSE IT? It has support for IE10 and up. http://caniuse.com/#feat=flexbox

BUT! Add a less than IE10 class to the HTML tag and use that class to do a float fallback for older browsers and you're good to go!


<!--[if IE 9]><html class="no-js lt-ie10"> <![endif]-->

The CSS



/* A modern grid / flexbox */

.group {
position: relative;
display: -webkit-box;           /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box;              /* OLD - Firefox 19- (doesn't work very well) */
display: -ms-flexbox;           /* TWEENER - IE 10 */
display: -webkit-flex;          /* NEW - Chrome */
display: flex;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

.group > div {
margin: 0 20px 20px 0;
width: 49%;
padding: 20px;
}

.group > div:last-child {
margin-right: 0;
}

/* A modern clearfix for IE8 and up. */
.group:after {
  content: "";
  display: table;
  clear: both;
}

The HTML



  <div class="group group-01">
    <div class="group-item">
      <h3>Digital Strategy and Marketing</h3>
      <ol>
        <li>Product and Service Design and Development</li>
        <li>...</li>
      </ol>
    </div>
    <div class="group-item">
      <h3>Creative, Craft, and Content</h3>
      <ol>
        <li>Online Marketing, Branding, and Identity</li>
        <li>...</li>
      </ol>
    </div>
  </div>
  <div class="group group-02">
    <div class="group-item">
      <h3>Web Software</h3>
      <ol>
        <li>Drupal</li>
        <li>...</li>
      </ol>
    </div>
    <div class="group-item">
      <h3>Mobile Applications</h3>
      <ol>
        <li>Apple iOS</li>
        <li>...</li>
      </ol>
    </div>
  </div>
  <div class="group group-03">
    <div class="group-item">
      <h3>Custom/R&D Software Engineering & Development for eCommerce, Mobile, CMS, Enterprise, ERP</h3>
      <ol>
        <li><strong>Languages:</strong> PHP, C#, Ruby, JavaScript, HTML5/CSS3, Flash/Flex, Objective-C, Swift, Java, C/C++ </li>
        <li>... </li>
      </ol>
    </div>
  </div>

Additional Resources

http://css-tricks.com/snippets/css/a-guide-to-flexbox/
http://css-tricks.com/flexbox-nav-bar-fixed-variable-take-rest-elements/

Location

New York
108 Wooster St, New York 10012
(949) 254-0339