lets-flex

never search for images

display

element{
  display: ... ;
}

block

element{
  display: block;
}

Floating blocks

element{
  display: block;
  float: left;
}

inline-block

element{
  display: inline-block;
}

Flex

.wrapper{
  display: flex;
}

listings

Example 1

listings

.example1
  flex-direction: row
  flex-wrap: wrap
  justify-content: center
  .item
    flex: 0 1 300px
    box-sizing: border-box
    border: 1px solid #999
    margin: 5px

autosizing

Example 2

autosizing

.example2
  .item
    flex: 1
    transition: all .5s
    span
      display: inline-block
      margin: 0 15px
      opacity: 0
      transition: all 0.5s
    &:hover
      flex: 3
      span
        display: inline-block
        opacity: 1

selectList

Example 3

selectListCode

.example2
  .item
    flex: 1
    -webkit-transition: all .5s
    span
      display: inline-block
      margin: 0 15px
      opacity: 0
      -webkit-transition: all 0.5s
    &:hover
      flex: 3
      span
        display: inline-block
        opacity: 1

selectListCode

var items = document.querySelectorAll('.item');
items = Array.prototype.slice.call(items);

function clickHandler(event){
  var target = event.target;
  if ( target.classList.contains('active') ){
    target.classList.remove('active');
    return;
  }
  target.classList.add('active');
};

items.forEach(function(item){
  item.addEventListener('click', clickHandler)
});

layout

Example 4

Layout code snippets

.example4
  flex-direction: row
  main, nav, aside
    border: 1px solid black
  main
    flex: 1 600px
    margin: 0 10px
  nav, aside
    flex: 1 150px
  nav
    order: -1

layout mediaquery snippet

@media (max-width: 750px)
  .example4
    flex-direction: column
    main
      margin: 0
    main, nav, aside
      flex: 1
      margin: 15px 0
    nav
      order: 1

conclusion

browser Support

• Chrome 21+
• Opera 12.1+
• Firefox 22+
• Safari 6.1+
• IE 11+

caniuse.com/flexbox

Caveats and Known Issues

• IE 10 has Flexbox support but for a draft version of the current spec: (display:flexbox).
• Safari 6 and earlier support the original Flexbox syntax, which is now obsolete: (display:box).
• Firefox does not support multi-line flexboxes.