Display: Flex…. Hummmm

Whilst this isn’t full supported I am dam looking forward to being able to use http://dev.w3.org/csswg/css3-flexbox/#overview or display: flex.

In short this will mean 2 very cool things, or 3… Depends which way you look at it.

Firstly we’ll be able to order how the browser renders markup for the browsers. Meaning, I can shift elements around inside a given element much like you can order things with index. so “order: -1” will mean given element is moved down one elements position.

Why wouldn’t you just position this element in this order already? Well I’m glad you asked that. For accessibility reasons. If you’re using a screen readers you’ll want to organise the markup as best and as clear as possible.

Take this example:
of a catalog where each item has a title, an photo, a description, and a purchase button. The designer’s intention is that each entry has the same overall size, that the photo be above the text, and that the purchase buttons aligned at the bottom, regardless of the length of the item’s description. Flex layout makes many aspects of this design easy:

The catalog uses flex layout to lay out rows of items horizontally, and to ensure that items within a row are all equal-height. Each entry is then itself a column flex container, laying out its contents vertically.
Within each entry, the source document content is ordered logically with the title first, followed by the description and the photo. This provides a sensible ordering for speech rendering and in non-CSS browsers. For a more compelling visual presentation, however, ‘order’ is used to pull the image up from later in the content to the top, and ‘align-self’ is used to center it horizontally.
An ‘auto’ margin above the purchase button forces it to the bottom within each entry box, regardless of the height of that item’s description.

#deals {
display: flex; /* Flex layout so items have equal height */
flex-flow: row wrap; /* Allow items to wrap into multiple lines */
}
.sale-item {
display: flex; /* Lay out each item using flex layout */
flex-flow: column; /* Lay out item's contents vertically */
}
.sale-item > img {
order: -1; /* Shift image before other content (in visual order) */
align-self: center; /* Center the image cross-wise (horizontally) */
}
.sale-item > button {
margin-top: auto; /* Auto top margin pushes button to bottom */
}

<section id='deals'>
  <section class='sale-item'>
    <h1>Computer Starter Kit</h1>
    <p>This is the best computer money can buy, if you don't have much money.
    <ul>
      <li>Computer
      <li>Monitor
      <li>Keyboard
      <li>Mouse
    </ul>
    <img src='images/computer.jpg'
         alt='You get: a white computer with matching peripherals.'>
    <button>BUY NOW</button>
  </section>
  <section class='sale-item'>
    …
  </section>
  …
</section>

If you can get all of that you’ll see its amazing plus exciting.

Secondly, the flex side of things. As i’ve always had to force, using width: 100% is great. But so often i’ve needed to use height: 100% but i would have to give the element position absolute to get it to stretch.This has many problems. This is what flex is here to fix. N boy is it far to long in the marking.

So the contents of a flex container will be able to do:

• can be laid out in any flow direction (leftwards, rightwards, downwards, or even upwards!)
• can have their display order reversed or rearranged at the style layer (i.e., visual order can be independent of source and speech order)
• can be laid out linearly along a single (main) axis or wrapped into multiple lines along a secondary (cross) axis
• can “flex” their sizes to respond to the available space
• can be aligned with respect to their container or each other
• can be dynamically collapsed or uncollapsed along the main axis while preserving the container’s cross size

Basically, it rocks. Bring it on. I’m off to play with it now!!