Справочник DESIGN/HTML/CSS

Мой Справочник | CSS3 | flex   (Статья)

Кратко:

display: flex | inline-flex; /* ФЛЕКС-контейнер */
flex-direction: row* | column | row-reverse | column-reverse; /* направление ФЛЕКС-оси */
flex-wrap: nowrap* | wrap | wrap-reverse; /* ПЕРЕНОС флекс-элементов, образование рядов */
flex-flow: row wrap; /* краткая запись */
justify-content: flex-start* | flex-end | center | space-between | space-around; /* РАСПРЕДЕНИЕ флекс-элементов вдоль ФЛЕКС-оси (актуально при наличии свободного пространства вдоль ФЛЕКС-оси) */
align-items: srtech (растяжение по вертикали)* | flex-start | flex-end | center | baseline (по тексту); /* Выравнивание флекс-элементов вдоль ПОПЕРЕЧНОЙ оси (актуально, при наличии свободного пространства вдоль ПОПЕРЕЧНОЙ оси, либо когда высота флекс-элементов разная) */
align-self: flex-start* | flex-end | center; /* Выравнивание отдельного флекс-элемента вдоль ПОПЕРЕЧНОЙ оси (перебивает align-items) */
align-content: flex-start* | flex-end | center | space-between | space-around | stretch; /* Распределение рядов флекс-элементов вдоль ПОПЕРЕЧНОЙ оси (работает с flex-wrap: wrap;), актуально при наличии свободного места вдоль поперечной оси и наличии нескольких рядов флекс-элементов*/
order: 0 | 1 | 2 ...; /* Порядковый номер отдельного флекс-элемента */
display: flex;
Флекс-контейнер
Внутри контейнера образуются флекс-элементы, и если не задавать фикс. ВЫСОТУ, то будет растягиваться по высоте контейнера, становяться в одну строку, равномерно распределяясь

Для контейнера:

<div class="sample-count">
    <div class="sample"></div>
    <div class="sample"></div>
    <div class="sample"></div>
</div>

.sample {
    width: 42px;
    border: 4px solid #f1e301;
    background-color: maroon;
    margin-right: 10px;
    margin-bottom: 10px;
    color: #fff;
    font-size: 18px;
}
.sample-count {
    display: flex;
    height: 100px;
    ...
/* Флекс-контейнер,
 ужимающийся под контент */
    display: inline-flex;
}
 		display: block;
1
2
3
1
2
3
flex-direction:
Направление ФЛЕКС ОСИ → ↓ ← ↑) 
.sample-count {
    display: flex;
    height: 100px;
    /*Строчный (по ум*)*/
    flex-direction: row;
    /*Строчный-реверсивный*/
    flex-direction: row-reverse;
    /*Колоночный*/
    flex-direction: column;
    /*Колоночный-реверсивный*/
    flex-direction: column-reverse;
}
1
2
3
1
2
3
1
2
3
1
2
3
flex-wrap:
ПЕРЕНОС флекс-элементов, если они не помещаются в контейнер
Если элементы не помещаются, то они всё-равно будут в одну строку, у них будет уменьшаться ширина, даже если её размер был задан. Для column не имеет смысла. 
.flex-sample {
    ...
    width: 42px;
}
.sample-count {
    display: flex;
    height: 100px;
    justify-content: flex-start;
    flex-direction: row;
    flex-wrap: nowrap;
    flex-wrap: wrap;
    flex-wrap: wrap-reverse;
}
1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10
flex-flow:
flex-flow - краткая запись
flex-direction | flex-wrap; 		flex-flow: row wrap;
justify-content:
РАСПРЕДЕНИЕ флекс-элементов
вдоль ФЛЕКС-оси

Актуально, при наличии свободного пространства вдоль ФЛЕКС-оси 
.sample-count {
    display: flex;
    height: 100px;
    flex-direction: row;
    justify-content: flex-start; (по ум*)
    justify-content: center;
    justify-content: flex-end;
    justify-content: space-around;
    justify-content: space-between;
}
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
align-items:
ВЫРАВНИВАНИЕ флекс-элементов по ПОПЕРЕЧНОЙ ЛИНИИ.

Актупльно, при наличии свободного пространства вдоль поперечной оси, либо когда высота флекс-элементов разная 
.sample1 {height: 50px;}
.sample2 {height: 75px;}
.sample3 {height: 100px;}

.sample-count {
    display: flex;
    height: 100px;
    flex-direction: row;
    justify-content: flex-start;
    align-items: srtech; (по ум*)
    align-items: flex-start;
    align-items: center;
    align-items: flex-end;
    align-items: baseline;
}
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
align-self:
ВЫРАВНИВАНИЕ отдельного флекс-элемента.

Переопределяет align-items 
.sample1 {
    height: 50px;
    align-self: flex-start;
}
.sample2 {
    height: 75px;
    align-self: center;
}
.sample3 {
    height: 100px;
    align-self: flex-end;
}
.sample-count {
    display: flex;
    height: 100px;
    justify-content: center;
    flex-direction: row;
}
1
2
3
align-content:
ВЫРАВНИВАНИЕ флекс-элементов вдоль поперечной оси
Работает, когда флексов НЕСКОЛЬКО РЯДОВ, указано свойство flex-wrap и не задана высота каждого флекса 
.sample-count {
    display: flex;
    height: 100px;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: stretch; (по ум*)
    align-content: flex-start;
    align-content: center;
    align-content: flex-end;
    align-content: space-between;
    align-content: space-around;
}
1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10
order:
ПОРЯДКОВЫЙ НОМЕР флекс-элементов

Чем меньше значение order, тем "первее" элемент. Можно использовать для "перестронии" сетки страницы 
.sample1 {order: 7;}
.sample2 {order: 8;}
.sample3 {order: 9;}
.sample4 {order: 10;}
.sample5 {order: 1;}
.sample6 {order: 2;}
.sample7 {order: 3;}
.sample8 {order: 4;}
.sample9 {order: 5;}
.sample10 {order: 6;}
1
2
3
4
5
6
7
8
9
10

Зависимость от других свойст

Свойства flexbox будут переопределяться при изменении свойств direction(ltr и rtr) и writing-mode

Разработчик: Евгений Леухин
EvgenyLeukhin@yandex.ru

© 2016 - 2021