Flexbox

SOURCE

General :

-Flex container (wrapper)
    -Flex items (element inside wrapper)

2 axis :
-main axis (set by flex-direction)
-cross axis

-alignement main axis = justify-content
-alignement cross axis = align-items

flex-direction :

  • row
  • column
  • row-reverse
  • column-reverse
<div class="wrapper">
    <div class="element">Element 1</div>
    <div class="element">Element 2</div>
    <div class="element">Element 3</div>
    <div class="element">Element 4</div>
</div>

.wrapper
{
  display:flex;
  flex-direction: row;
  flex-wrap: wrap; /* Line break */
}

flexbox-basic.png

Order elements -> order :

.element.a
{
    order: 1;
}

Resize -> flex :

.element.a
{
    flex: 2;
}
.element.b
{
    flex: 1;
}