Свойство flex - сокращение для flex-grow, flex-shrink и flex-basis в CSS
Свойство flex сокращение для flex-basis,
flex-shrink
и flex-grow.
Применяется к: конкретному flex блоку.
Порядок значения не имеет. Второй и третий
параметры (flex-shrink, flex-basis)
не обязательны.
Значения
См. соответствующие свойства.
Значение по умолчанию: 0 1 auto.
Пример
Пусть у нас есть 3 элемента. Ширина каждого из них
составляет 200px и суммарно равна 600px,
что больше ширины родительского контейнера, которая
равна 300px. Давайте назначим для первого элемента ширину
200px, для второго элемента - 300px, для
третьего элемента - 100px. У всех элементов
пусть значение flex-basis будет равно 1,
а flex-shrink - 1, 2, 3 в соответствии
с порядковым номером элемента:
<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
<div class="child elem2">3</div>
</div>
.parent {
display: flex;
width: 350px;
height: 200px;
border: 1px solid red;
}
.child {
width: 200px;
height: 50px;
border: 1px solid green;
}
.elem1 {
flex: 200px 1 1;
}
.elem2 {
flex: 300px 1 2;
}
.elem3 {
flex: 100px 1 3;
}
:
Смотрите также
-
свойство
flex-direction,
которое задает направление осей flex блоков -
свойство
justify-content,
которое задает выравнивание по главной оси -
свойство
align-items,
которое задает выравнивание по поперечной оси -
свойство
flex-wrap,
которое многострочность flex блоков -
свойство
flex-flow,
сокращение для flex-direction и flex-wrap -
свойство
order,
которое задает порядок flex блоков -
свойство
align-self,
которое задает выравнивание одного блока -
свойство
flex-basis,
которое задает размер конкретного flex блока -
свойство
flex-grow,
которое задает жадность flex блоков -
свойство
flex-shrink,
которое задает сжимаемость flex блоков