Flexbox

Позиционирование предков контейнера

По умолчанию блоки div растягиваются на всего предка, поэтому начинаются с новой линии:

<style>
    .graybox  { border: 1px solid black;  background: #eee; width: 400px; }
    .yellowbox{ border: 1px dashed blue;  background: #ffc; margin: 5px;  }
</style>
 
<div class="graybox">
    <div class="yellowbox">1.</div>
    <div class="yellowbox">2.</div>
</div>

Изменим стандартное отображение display на "гибкое" flex. По умолчанию блоки будут минимальной ширины и разместятся вдоль горизонтальной оси:

<div class="graybox" style="display: flex;">
    <div class="yellowbox">1.</div>
    <div class="yellowbox">2.</div>
</div>

Можно задать детям и фиксированные размеры с тем же расположением:

<div class="graybox" style="display: flex;">
    <div class="yellowbox" style="width: 100px;">1.</div>
    <div class="yellowbox" style="width: 200px;">2.</div>
</div>

Основные принципы flex

У флекса есть две оси - главная и поперечная к ней. По умолчанию (flex-direction: row) главная ось горизонтальна, а поперечная вертикальна. Главную ось можно повернуть: flex-direction: column. Возможные значения: row, row-reverse, column, column-reverse и inherit (наследует от родителя).

Разные параметры выравнивания с префиксом justify- соответствуют главной оси, а с префиксом align- поперечной.

justify-content: center;	- дети центрируются вдоль главной оси с сохранением отступов margin;
justify-content: flex-end;	- дети прижаты к концу главной оси;
justify-content: space-between;	- одинаковые расстояния между детьми и нет с границами;
justify-content: space-around;	- одинаковые между детьми и половинные с границами контейнера;
justify-content: space-evenly;	- одинаковые между детьми и с границами контейнера;
justify-content: flex-start;	- дети прижаты в начало главной оси (по умолчанию).

Для поперечной оси, по умолчанию, если у объекта нет height, он растягивается (stretch) на всю высоту контейнера и все прижимаются к верху.

align-items: center;	- дети центрируются вдоль поперечной оси;
align-items: flex-start;	- элементы располагаются у начала поперечной оси;
align-items: flex-end	- элементы располагаются в конце поперечной оси.

<style>
    .aligner1 {
        height: 100px;                 /* фиксированная ширина контейнера */
        display: flex;                 
        justify-content: space-around; /* с равными отступами вдоль главной оси */
        align-items:     center;       /* по центру вдоль поперечной оси */
    }    
</style>
<div class="graybox aligner1">
    <div class="yellowbox" style="width:50px; height: 20px"></div>
    <div class="yellowbox" style="width:75px; height: 40px"></div>
    <div class="yellowbox" style="width:100px;height: 60px;"></div>
</div>

Перенос блоков

Свойство flex-wrap: wrap разрешает блокам переезжать на следующую линию, если они не помещаются:

<style>
    .wraper {
        display: flex;                 
        flex-wrap: wrap;             /* переносить блоки если не помещаются */      
    }    
</style>
 
<div class="graybox wraper">
    <div class="yellowbox" style="width:100px; height: 20px"></div>
    <div class="yellowbox" style="width:200px; height: 20px"></div>
    <div class="yellowbox" style="width:100px; height: 20px"></div>
    <div class="yellowbox" style="width:100px; height: 20px"></div>
</div>

Разное

А теперь сделаем одинаковой ширины, с учётом мердженов

Привет

flex

<div class="graybox" style="display: flex;">
    <div class="yellowbox" style="flex: 1;">Привет</div>
    <div class="yellowbox" style="flex: 1;">flex</div>
</div>