Flexbox

Сокращенные свойства

• flex-flow - сокращение для flex-direction + flex-wrap

flex-flow: column wrap

Основные свойства

• flex-direction - направление главной оси
• row* || column
• justify-content - выравнивание по главной оси
• flex-start* || `flex-end || center || space-between || space-around
• align-items - выравнивание по поперечной оси
• stretch* || flex-start || flex-end || center || baseline

Многострочная организация

• flex-wrap - включение многоколоночности
• wrap* || nowrap || wrap-reverse
• align-content- выравнимание многострочного контента по вертикали
• stretch* || flex-start || flex-end || center || baseline

Правила для дочерних элементов flex-контейнера

• flex – короткая запись для свойств flex-grow, flex-shrink и flex-basisflex-basis – базовый размер отдельно взятого flex-блока
• Может быть задан в любых единицах измерения длинны (px, em, %, …) или auto(по умолчанию).
• flex-grow– “жадность” отдельно взятого flex-блока
• flex-shrink – фактор “сжимаемости” отдельно взятого flex-блока
• Определяет, насколько flex-блок будет уменьшаться относительно соседних эдементов внутри flex-контейнера в случае недостатка свободного места. По умолчанию равен 1
• justify-self - выравнивание отдельно взятого flex-блока по главной оси
• stretch* || flex-start || flex-end || center || baseline
• align-self – выравнивание отдельно взятого flex-блока по поперечной оси
• stretch* || flex-start || flex-end || center || baseline
• order – порядок следования отдельно взятого flex-блока внутри flex-контейнера. Задается целым числом и по умолчанию равно 0

<div class="my-flex-container">
  <div class="my-flex-block" style="order: 5" >item1</div>
  <div class="my-flex-block" style="order: 10">item2</div>
  <div class="my-flex-block" style="order: 5" >item3</div>
  <div class="my-flex-block" style="order: 5" >item4</div>
  <div class="my-flex-block" style="order: 0" >item5</div>
</div>