flex¶
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
.flex-container {
/* флекс контейнер, а его потомки - флекс-элементы */
display: flex;
background-color: #aff1b6;
}
.flex-item {
/* flex: flex-grow flex-shrink flex-basis; */
flex: 0 1 auto;
background-color: #ffcca5;
padding: 10px;
margin: 5px;
}
.flex-item::nth-child(3) {
/* толкаем 3 элемент вправо */
margin-left: auto;
/* центрируем элемент */
margin: auto;
}
align-content¶
Распределение основных осей вродителе
center
space-between
stretch
.some-class {
align-content: center;
}
align-items¶
Выравнивание дочерних элементов по второстепенной оси
.flex-container {
display: flex;
align-item: stretch;
background-color: #aff1b6;
height: 70px;
}
.flex-item {
background-color: #ffcca5;
padding: 10px;
margin: 5px;
}
baseline
flex-start - выравнивание по верхнему краю
flex-end - выравнивание по нижнему краю
center - по центру
stretch - по максимальному, по умолчанию
align-self¶
Выравнивание самого дочернего элемента
auto - по умолчанию, как в родительском
baseline
flex-start - выравнивание по верхнему краю
flex-end - выравнивание по нижнему краю
center - по центру
stretch - по максимальному
.flex-item {
align-self: auto;
}
flex-basis¶
Задает минимальную ширину дочернего элемента.
Если дочерний элемент находится на основной оси с другими элементами, то его ширина не будет изменяться при уменьшении ширины родительского элемента, другие элементы или сам элемент будут переходить на другие оси.
Если дочерний элемент находится на основной оси один, то его ширина будет уменьшаться при уменьшении ширины родительского элемента.
auto - по умолчанию
.flex-item {
flex-basis: 300px;
}
flex-direction¶
Направление основной оси
.flex-container {
display: flex;
flex-direction: row;
background-color: #aff1b6;
height: 70px;
}
.flex-item {
background-color: #ffcca5;
padding: 10px;
width: 30px;
height: 30px;
margin: 5px;
}
column - сверху вних
column-reverse - снизу вверх
row - по умолчанию, слева направо
row-reverse - справа налево
flex-flow¶
.flex-container {
display: flex;
flex-flow: column;
background-color: #aff1b6;
height: 70px;
}
.flex-item {
background-color: #ffcca5;
padding: 10px;
width: 30px;
height: 30px;
margin: 5px;
}
column
flex-grow¶
Степень жадности элемента
Если значение отличное от 0, то по ширине элемент займет все пустое пространство по главной оси.
0 - по умолчанию, элемент не жадный
.flex-item {
flex-grow: 0;
}
flex-shrink¶
Степень/скорость сжимаемости элемента
0 - элемент не сжимаемый
1 - по умолчанию, элемент сжимаемый
.flex-item {
flex-shrink: 1;
}
flex-wrap¶
Перенос элементов в элементе
no-wrap - по умолчанию, не переносить
wrap - переносить
wrap-reverse
.flex-container {
flex-wrap: wrap;
}
justify-content¶
Заполнение оси
.flex-container {
flex-direction: row;
background-color: #aff1b6;
height: 70px;
justify-content: flex-end;
}
.flex-item {
background-color: #ffcca5;
padding: 10px;
width: 30px;
height: 30px;
margin: 5px;
}
flex-end - относительно конца
flex-start - относительно начала
center - от центра
space-around - растягивает по оси, оставляя равные промежутки между элементами
space-between - растягивает по оси, оставляя равные промежутки между элементами