Flexbox snippet https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties http://frontender.info/a-guide-to-flexbox/ http://www.slideshare.net/radyno/flexbox-39134410

flex_snippet.html

<div class="main">
    <!--flex block-->
    <div class="item">1 Lorem ipsum dolor sit amet, consecteur adipisicing elit. Excepturi repellat nisi ad soluta vitae velit similique consequatur aliquam, facere ea.</div>
    <!--flex block-->
    <div class="item">2 Lorem ipsum dolor sit amet, consecteur adipisicing elit. Excepturi repellat nisi ad soluta vitae velit similique consequatur aliquam, facere ea.</div>
    <!--flex block-->
    <div class="item">3 Lorem ipsum dolor sit amet, consecteur adipisicing elit. Excepturi repellat nisi ad soluta vitae velit similique consequatur aliquam, facere ea.</div>
    <!--flex block-->
    <div class="item">4 Lorem ipsum dolor sit amet, consecteur adipisicing elit. Excepturi repellat nisi ad soluta vitae velit similique consequatur aliquam, facere ea.</div>
    <!--flex block-->
    <div class="item">5 Lorem ipsum dolor sit amet, consecteur adipisicing elit. Excepturi repellat nisi ad soluta vitae velit similique consequatur aliquam, facere ea.</div>
    <!--flex block-->
    <div class="item">6 Lorem ipsum dolor sit amet, consecteur adipisicing elit. Excepturi repellat nisi ad soluta vitae velit similique consequatur aliquam, facere ea.</div>
</div>

flexbox_snippet.css

.container {
  display: flex; /*flex container*/
  /* with flex don't work columns, float, clear, vertical-align */
  flex-direction: row; /* задает направление главной оси(main axis)*/
  /*flex-блоки*/
  justify-content: center; /* отвечает за расположение flex-блоков на главной оси*/
  align-items: stretch; /* отвечает за расположение flex-блоков на поперечной оси(cross axis)*/
  /*ряды*/
  flex-wrap: wrap; /* вкл/выкл многострочность(ряды)*/
  align-content: stretch; /*выравнивание по поперечной оси рядов!, а не flex-блоков, очень похоже на align-items, но по сути имеет смысл только для многострочного flexbox-а*/
  /**/
  /*flex-flow: <'flex-direction'> || <'flex-wrap'>*/
}

.item {
  /*Определяет 'главный'(ширина или высота зависит от направления главной оси) размер по умолчанию для элемента перед распределением пространства в контейнере.*/
  flex-basis: 200px; 
  /*('жадность')Определяет для flex-элемента возможность «вырастать» при необходимости. Оно определяет, какую долю свободного места внутри контейнера элемент может занять*/
  flex-grow: 2; /* (фактор расширяемости) работает ТОЛЬКО если есть свободное пространство*/
  flex-shrink: 0; /* (фактор сжимаемости) */
  /* flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] */
  align-self: center; /*Позволяет переопределить выравнивание, заданное по умолчанию или в align-items, для отдельных flex-элементов.*/
  order: 1; /*переопределяет порядок элементов, нумерация идет с 0 !*/
}