Свойства FLEX - контейнера. Применяются для flex-контейнера, обертки flex-элементов
1
2
3
4
CSS код:
/* родитель */
.block{
}
.block__row{
border: 10px solid #ece89d;
}
.block__element{
border: 5px solid #5e5373;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
.block{
}
.block__row{
border: 10px solid #ece89d;
}
.block__element{
border: 5px solid #5e5373;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
1
2
3
4
Определяет блочный flex-контейнер. Преобразовывает все свои прямые, дочерние элементы во flex-элементы.
CSS код:
/* родитель */
.block{
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
display: flex;
}
/* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
.block{
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
display: flex;
}
/* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
1
2
3
4
Определяет строчный flex-контейнер. Преобразовывает все свои прямые, дочерние элементы во flex-элементы.
CSS код:
/* родитель */
.block{
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
display: inline-flex;
}
/* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
.block{
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
display: inline-flex;
}
/* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
1
2
3
4
Определяет строчный flex-контейнер. Преобразовывает все свои прямые, дочерние элементы во flex-элементы.
CSS код:
/* родитель */
.block{
text-align: center;
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
display: inline-flex;
} /* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
.block{
text-align: center;
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
display: inline-flex;
} /* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
1
2
3
4
Значение по умолчанию (не нужно указывать). Flex-элементы не смогут перемещаться на следующие строки flex-контейнера.
CSS код:
/* родитель */
.block{
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
display:flex;
width: 170px;
flex-wrap:nowrap;
}
/* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
.block{
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
display:flex;
width: 170px;
flex-wrap:nowrap;
}
/* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
1
2
3
4
Flex-элементы смогут перемещаться на следующие строки flex-контейнера.
CSS код:
/* родитель */
.block{
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
display:flex;
width: 170px;
flex-wrap:wrap;
}
/* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
.block{
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
display:flex;
width: 170px;
flex-wrap:wrap;
}
/* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
1
2
3
4
Flex-элементы смогут перемещаться на следующие строки flex-контейнера, но в обратном порядке.
CSS код:
/* родитель */
.block{
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
display:flex;
width: 170px;
flex-wrap:wrap-reverse;
}
/* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
.block{
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
display:flex;
width: 170px;
flex-wrap:wrap-reverse;
}
/* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
1
2
3
4
Значение по умолчанию (не нужно указывать). Основная ось горизонтальная. Все flex-элементы расположатся слева направо по горизонтали.
CSS код:
/* родитель */
.block{
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
display:flex;
flex-direction:row;
}
/* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
.block{
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
display:flex;
flex-direction:row;
}
/* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
1
2
3
4
Все flex-элементы расположатся справа налево по горизонтали.
CSS код:
/* родитель */
.block{
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
display:flex;
flex-direction: row-reverse;
}
/* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
.block{
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
display:flex;
flex-direction: row-reverse;
}
/* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
1
2
3
4
Основная ось сменится с горизонтальной на вертикальную. Все flex-элементы расположатся сверху вниз.
CSS код:
/* родитель */
.block{
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
display:flex;
flex-direction: column;
}
/* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
.block{
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
display:flex;
flex-direction: column;
}
/* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
1
2
3
4
Основная ось сменится с горизонтальной на вертикальную. Все flex-элементы расположатся снизу вверх.
CSS код:
/* родитель */
.block{
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
display:flex;
flex-direction: column-reverse;
}
/* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
.block{
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
display:flex;
flex-direction: column-reverse;
}
/* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
Существует еще свойство flex-flow. Это сокращение для свойств flex-direction и flex-wrap, которые вместе определяют основную и поперечные ось и возможность перемещаться по строкам. По умолчанию row nowrap.
1
2
3
4
Значение по умолчанию (не нужно указывать). Flex-элементы прижимаются к началу основной оси.
CSS код:
/* родитель */
.block{
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
display:flex;
justify-content:flex-start;
}
/* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
.block{
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
display:flex;
justify-content:flex-start;
}
/* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
1
2
3
4
Flex-элементы прижимаются к концу основной оси.
CSS код:
/* родитель */
.block{
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
display:flex;
justify-content:flex-end;
}
/* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
.block{
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
display:flex;
justify-content:flex-end;
}
/* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
1
2
3
4
Flex-элементы располагаются по центру основной оси.
CSS код:
/* родитель */
.block{
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
display:flex;
justify-content: center;
}
/* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
.block{
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
display:flex;
justify-content: center;
}
/* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
1
2
3
4
Flex-элементы располагаются равномерно по основной оси. Первый элемент находится в начале оси, последний элемент находится в конце оси.
CSS код:
/* родитель */
.block{
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
display:flex;
justify-content: space-between;
}
/* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
.block{
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
display:flex;
justify-content: space-between;
}
/* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
1
2
3
4
Flex-элементы располагаются равномерно по основной оси .К каждому flex-элементу добавляется пространство слева и справа.
CSS код:
/* родитель */
.block{
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
display:flex;
justify-content: space-around;
}
/* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
.block{
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
display:flex;
justify-content: space-around;
}
/* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
1
2
3
4
Flex-элементы располагаются равномерно по основной оси с одинаковым пространством вокруг них.
CSS код:
/* родитель */
.block{
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
display:flex;
justify-content: space-evenly;
}
/* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
.block{
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
display:flex;
justify-content: space-evenly;
}
/* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
1
2
3
4
Значение по умолчанию (не нужно указывать). Flex-элементы растягиваются на весь размер поперечной оси flex-контейнера.
CSS код:
/* родитель */
.block{
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
display:flex;
height:150px;
align-items:stretch;
}
/* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
.block{
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
display:flex;
height:150px;
align-items:stretch;
}
/* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
1
2
3
4
Flex-элементы прижимаются к началу поперечной оси.
CSS код:
/* родитель */
.block{
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
display:flex;
height:150px;
align-items:flex-start;
}
/* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
.block{
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
display:flex;
height:150px;
align-items:flex-start;
}
/* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
1
2
3
4
Flex-элементы прижимаются к концу поперечной оси.
CSS код:
/* родитель */
.block{
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
display:flex;
height:150px;
align-items:flex-end;
}
/* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
.block{
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
display:flex;
height:150px;
align-items:flex-end;
}
/* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
1
2
3
4
Flex-элементы располагаются по центру поперечной оси.
CSS код:
/* родитель */
.block{
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
display:flex;
height:150px;
align-items:center;
}
/* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
.block{
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
display:flex;
height:150px;
align-items:center;
}
/* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
1
2
3
4
Flex-элементы располагаются по базовой линии.
CSS код:
/* родитель */
.block{
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
display:flex;
height:150px;
align-items:baseline;
}
/* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
.block{
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
display:flex;
height:150px;
align-items:baseline;
}
/* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
Свойства FLEX - элементов. Применяются для flex-элемента, дочернего объекта flex-контейнера
1
2
3
4
Значение по умолчанию (не нужно указывать).
CSS код:
/* родитель */
.block{
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
display:flex;
}
/* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* flex-элемент №1 */
.block__element_1{
order:1;
}
/* flex-элемент №2 */
.block__element_2{
order:2;
}
/* flex-элемент №3 */
.block__element_3{
order:3;
}
/* flex-элемент №4 */
.block__element_4{
order:4;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
.block{
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
display:flex;
}
/* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* flex-элемент №1 */
.block__element_1{
order:1;
}
/* flex-элемент №2 */
.block__element_2{
order:2;
}
/* flex-элемент №3 */
.block__element_3{
order:3;
}
/* flex-элемент №4 */
.block__element_4{
order:4;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
1
2
3
4
CSS код:
/* родитель */
.block{
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
display:flex;
}
/* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* flex-элемент №1 */
.block__element_1{
order:3;
}
/* flex-элемент №2 */
.block__element_2{
order:2;
}
/* flex-элемент №3 */
.block__element_4{
order:3;
}
/* flex-элемент №4 */
.block__element_1{
order:4;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
.block{
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
display:flex;
}
/* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* flex-элемент №1 */
.block__element_1{
order:3;
}
/* flex-элемент №2 */
.block__element_2{
order:2;
}
/* flex-элемент №3 */
.block__element_4{
order:3;
}
/* flex-элемент №4 */
.block__element_1{
order:4;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
1
2
3
4
CSS код:
/* родитель */
.block{
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
display:flex;
}
/* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* flex-элемент №1 */
.block__element_1{
order: 4;
}
/* flex-элемент №2 */
.block__element_2{
order: 1;
}
/* flex-элемент №3 */
.block__element_4{
order: 2;
}
/* flex-элемент №4 */
.block__element_1{
order: 3;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
.block{
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
display:flex;
}
/* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* flex-элемент №1 */
.block__element_1{
order: 4;
}
/* flex-элемент №2 */
.block__element_2{
order: 1;
}
/* flex-элемент №3 */
.block__element_4{
order: 2;
}
/* flex-элемент №4 */
.block__element_1{
order: 3;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
1
2
3
4
Значение по умолчанию (не нужно указывать). Flex-элементы растягиваются на весь размер поперечной оси flex-контейнера.
CSS код:
/* родитель */
.block{
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
display: flex;
height: 150px;
}
/* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* flex-элемент №1 */
.block__element_1{
}
/* flex-элемент №2 */
.block__element_2{
/* наследует align-items:stretch; */
align-self: auto;
}
/* flex-элемент №3 */
.block__element_3{
}
/* flex-элемент №4 */
.block__element_4{
/* наследует align-items:stretch; */
align-self: auto;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
.block{
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
display: flex;
height: 150px;
}
/* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* flex-элемент №1 */
.block__element_1{
}
/* flex-элемент №2 */
.block__element_2{
/* наследует align-items:stretch; */
align-self: auto;
}
/* flex-элемент №3 */
.block__element_3{
}
/* flex-элемент №4 */
.block__element_4{
/* наследует align-items:stretch; */
align-self: auto;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
1
2
3
4
Flex-элементы прижимаются к началу поперечной оси.
CSS код:
/* родитель */
.block{
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
display: flex;
height: 150px;
}
/* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* flex-элемент №1 */
.block__element_1{
}
/* flex-элемент №2 */
.block__element_2{
align-self: flex-start;
}
/* flex-элемент №3 */
.block__element_3{
}
/* flex-элемент №4 */
.block__element_4{
align-self: flex-start;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
.block{
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
display: flex;
height: 150px;
}
/* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* flex-элемент №1 */
.block__element_1{
}
/* flex-элемент №2 */
.block__element_2{
align-self: flex-start;
}
/* flex-элемент №3 */
.block__element_3{
}
/* flex-элемент №4 */
.block__element_4{
align-self: flex-start;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
1
2
3
4
Flex-элементы прижимаются к концу поперечной оси.
CSS код:
/* родитель */
.block{
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
display: flex;
height: 150px;
}
/* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* flex-элемент №1 */
.block__element_1{
}
/* flex-элемент №2 */
.block__element_2{
align-self: flex-end;
}
/* flex-элемент №3 */
.block__element_3{
}
/* flex-элемент №4 */
.block__element_4{
align-self: flex-end;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
.block{
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
display: flex;
height: 150px;
}
/* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* flex-элемент №1 */
.block__element_1{
}
/* flex-элемент №2 */
.block__element_2{
align-self: flex-end;
}
/* flex-элемент №3 */
.block__element_3{
}
/* flex-элемент №4 */
.block__element_4{
align-self: flex-end;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
1
2
3
4
Flex-элементы располагаются по центру поперечной оси.
CSS код:
/* родитель */
.block{
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
display: flex;
height: 150px;
}
/* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* flex-элемент №1 */
.block__element_1{
}
/* flex-элемент №2 */
.block__element_2{
align-self: center;
}
/* flex-элемент №3 */
.block__element_3{
}
/* flex-элемент №4 */
.block__element_4{
align-self: center;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
.block{
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
display: flex;
height: 150px;
}
/* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* flex-элемент №1 */
.block__element_1{
}
/* flex-элемент №2 */
.block__element_2{
align-self: center;
}
/* flex-элемент №3 */
.block__element_3{
}
/* flex-элемент №4 */
.block__element_4{
align-self: center;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
1
2 flex-element
3
4 flex-element
Значение по умолчанию (не нужно указывать). Flex-элемент будет занимать размер в зависимости от контента внутри него.
CSS код:
/* родитель */
.block{
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
display: flex;
}
/* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* flex-элемент №1 */
.block__element_1{
}
/* flex-элемент №2 */
.block__element_2{
flex-basis: auto;
}
/* flex-элемент №3 */
.block__element_3{
}
/* flex-элемент №4 */
.block__element_4{
flex-basis: auto;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
.block{
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
display: flex;
}
/* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* flex-элемент №1 */
.block__element_1{
}
/* flex-элемент №2 */
.block__element_2{
flex-basis: auto;
}
/* flex-элемент №3 */
.block__element_3{
}
/* flex-элемент №4 */
.block__element_4{
flex-basis: auto;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
1
2 flex-element
3
4 flex-element
Устанавливаем двум flex-элементам начальную ширину в пикселях.
CSS код:
/* родитель */
.block{
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
display: flex;
}
/* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* flex-элемент №1 */
.block__element_1{
}
/* flex-элемент №2 */
.block__element_2{
flex-basis: 200px;
}
/* flex-элемент №3 */
.block__element_3{
}
/* flex-элемент №4 */
.block__element_4{
flex-basis: 400px;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
.block{
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
display: flex;
}
/* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* flex-элемент №1 */
.block__element_1{
}
/* flex-элемент №2 */
.block__element_2{
flex-basis: 200px;
}
/* flex-элемент №3 */
.block__element_3{
}
/* flex-элемент №4 */
.block__element_4{
flex-basis: 400px;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
1
2 flex-element
3
4 flex-element
Устанавливаем двум flex-элементам начальную ширину в процентах.
CSS код:
/* родитель */
.block{
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
display: flex;
}
/* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* flex-элемент №1 */
.block__element_1{
}
/* flex-элемент №2 */
.block__element_2{
flex-basis: 30%;
}
/* flex-элемент №3 */
.block__element_3{
}
/* flex-элемент №4 */
.block__element_4{
flex-basis: 60%;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
.block{
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
display: flex;
}
/* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* flex-элемент №1 */
.block__element_1{
}
/* flex-элемент №2 */
.block__element_2{
flex-basis: 30%;
}
/* flex-элемент №3 */
.block__element_3{
}
/* flex-элемент №4 */
.block__element_4{
flex-basis: 60%;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
1
2
3
4
Значение по умолчанию (не нужно указывать). Flex-элемент не может увеличится.
CSS код:
/* родитель */
.block{
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
display: flex;
}
/* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* flex-элемент №1 */
.block__element_1{
}
/* flex-элемент №2 */
.block__element_2{
flex-grow: 0;
}
/* flex-элемент №3 */
.block__element_3{
}
/* flex-элемент №4 */
.block__element_4{
flex-grow: 0;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
.block{
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
display: flex;
}
/* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* flex-элемент №1 */
.block__element_1{
}
/* flex-элемент №2 */
.block__element_2{
flex-grow: 0;
}
/* flex-элемент №3 */
.block__element_3{
}
/* flex-элемент №4 */
.block__element_4{
flex-grow: 0;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
1
2
3
4
Flex-элемент увеличится, заполняя пространство flex-контейнера.
CSS код:
/* родитель */
.block{
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
display: flex;
}
/* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* flex-элемент №1 */
.block__element_1{
}
/* flex-элемент №2 */
.block__element_2{
flex-grow: 1;
}
/* flex-элемент №3 */
.block__element_3{
}
/* flex-элемент №4 */
.block__element_4{
flex-grow: 1;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
.block{
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
display: flex;
}
/* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* flex-элемент №1 */
.block__element_1{
}
/* flex-элемент №2 */
.block__element_2{
flex-grow: 1;
}
/* flex-элемент №3 */
.block__element_3{
}
/* flex-элемент №4 */
.block__element_4{
flex-grow: 1;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
1
2
3
4
Значение по умолчанию (не нужно указывать). Flex-элемент не может увеличится.
CSS код:
/* родитель */
.block{
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
max-width:400px;
display: flex;
}
/* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* flex-элемент №1 */
.block__element_1{
}
/* flex-элемент №2 */
.block__element_2{
flex-basis: 200px;
flex-shrink: 1;
}
/* flex-элемент №3 */
.block__element_3{
}
/* flex-элемент №4 */
.block__element_4{
flex-basis: 300px;
flex-shrink: 1;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
.block{
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
max-width:400px;
display: flex;
}
/* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* flex-элемент №1 */
.block__element_1{
}
/* flex-элемент №2 */
.block__element_2{
flex-basis: 200px;
flex-shrink: 1;
}
/* flex-элемент №3 */
.block__element_3{
}
/* flex-элемент №4 */
.block__element_4{
flex-basis: 300px;
flex-shrink: 1;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
1
2
3
4
Flex-элемент не может увеличится.
CSS код:
/* родитель */
.block{
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
max-width:400px;
display: flex;
}
/* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* flex-элемент №1 */
.block__element_1{
}
/* flex-элемент №2 */
.block__element_2{
flex-basis: 200px;
flex-shrink: 0;
}
/* flex-элемент №3 */
.block__element_3{
}
/* flex-элемент №4 */
.block__element_4{
flex-basis: 300px;
flex-shrink: 0;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
.block{
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
max-width:400px;
display: flex;
}
/* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* flex-элемент №1 */
.block__element_1{
}
/* flex-элемент №2 */
.block__element_2{
flex-basis: 200px;
flex-shrink: 0;
}
/* flex-элемент №3 */
.block__element_3{
}
/* flex-элемент №4 */
.block__element_4{
flex-basis: 300px;
flex-shrink: 0;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
1
2
3
4
Значение по умолчанию (не нужно указывать). Flex-элемент не может увеличиваться, может уменьшаться. Базовый размер автоматический.
CSS код:
/* родитель */
.block{
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
display: flex;
}
/* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* flex-элемент №1 */
.block__element_1{
}
/* flex-элемент №2 */
.block__element_2{
flex: 0 1 auto;
}
/* flex-элемент №3 */
.block__element_3{
}
/* flex-элемент №4 */
.block__element_4{
flex: 0 1 auto;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
.block{
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
display: flex;
}
/* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* flex-элемент №1 */
.block__element_1{
}
/* flex-элемент №2 */
.block__element_2{
flex: 0 1 auto;
}
/* flex-элемент №3 */
.block__element_3{
}
/* flex-элемент №4 */
.block__element_4{
flex: 0 1 auto;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
1
2
3
4
Flex-элемент может увеличиваться, может уменьшаться. Базовый размер автоматический.
CSS код:
/* родитель */
.block{
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
display: flex;
}
/* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* flex-элемент №1 */
.block__element_1{
}
/* flex-элемент №2 */
.block__element_2{
flex: 1 1 auto;
}
/* flex-элемент №3 */
.block__element_3{
}
/* flex-элемент №4 */
.block__element_4{
flex: 1 1 auto;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
.block{
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
display: flex;
}
/* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* flex-элемент №1 */
.block__element_1{
}
/* flex-элемент №2 */
.block__element_2{
flex: 1 1 auto;
}
/* flex-элемент №3 */
.block__element_3{
}
/* flex-элемент №4 */
.block__element_4{
flex: 1 1 auto;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
1
2
3
4
Flex-элемент не может увеличиваться, не может уменьшаться. Базовый размер 200px.
CSS код:
/* родитель */
.block{
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
display: flex;
}
/* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* flex-элемент №1 */
.block__element_1{
}
/* flex-элемент №2 */
.block__element_2{
flex: 0 0 200px;
}
/* flex-элемент №3 */
.block__element_3{
}
/* flex-элемент №4 */
.block__element_4{
flex: 0 0 200px;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
.block{
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
display: flex;
}
/* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* flex-элемент №1 */
.block__element_1{
}
/* flex-элемент №2 */
.block__element_2{
flex: 0 0 200px;
}
/* flex-элемент №3 */
.block__element_3{
}
/* flex-элемент №4 */
.block__element_4{
flex: 0 0 200px;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
1
2
3
4
Flex-элемент может увеличиваться, не может уменьшаться. Базовый размер 50%.
CSS код:
/* родитель */
.block{
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
display: flex;
}
/* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* flex-элемент №1 */
.block__element_1{
}
/* flex-элемент №2 */
.block__element_2{
flex: 1 0 50%;
}
/* flex-элемент №3 */
.block__element_3{
}
/* flex-элемент №4 */
.block__element_4{
flex: 1 0 50%;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}
.block{
}
/* flex-контейнер */
.block__row{
border: 10px solid #ece89d;
display: flex;
}
/* flex-элемент */
.block__element{
border: 5px solid #5e5373;
}
/* flex-элемент №1 */
.block__element_1{
}
/* flex-элемент №2 */
.block__element_2{
flex: 1 0 50%;
}
/* flex-элемент №3 */
.block__element_3{
}
/* flex-элемент №4 */
.block__element_4{
flex: 1 0 50%;
}
/* контент */
.block__content{
background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */
}