Свойство flex
Сокращенная запись для свойств flex-grow, flex-shrink, flex-basis и применяется к элементам контейнера flexbox
flex: 1 1 100px;Пошаговый план! Как быстро научиться создавать сайты!
- поддерживается начиная с
- частичная поддержка до
- не поддерживается
Значения
flex: 1;
Если указан один параметр без единиц измерения - определяет значение для flex-grow, при этом flex-basis будет равен 0. В итоге получим элементы одинаковой ширины.
<style>
.example-1 {
display: flex;
outline: 2px dashed #ccc;
}
.example-1-item {
flex: 1;
padding: 5px;
margin: 2px;
background: #8ee391;
}
</style>
<div class="example-1">
<div class="example-1-item">текст текст текст</div>
<div class="example-1-item">текст текст</div>
<div class="example-1-item">текст</div>
</div>текст текст текст
текст текст
текст
flex: 50%;
Если указан один параметр с единицами измерения - определяет значение для flex-basis, при этом flex-grow будет равен 1
<style>
.example-2 {
display: flex;
flex-wrap: wrap;
outline: 2px dashed #ccc;
}
.example-2-item {
flex: 40%;
padding: 5px;
margin: 2px;
background: #8ee391;
}
</style>
<div class="example-2">
<div class="example-2-item">текст текст текст</div>
<div class="example-2-item">текст текст</div>
<div class="example-2-item">текст</div>
</div>текст текст текст
текст текст
текст
flex: 0 40%;
Если указано два параметра, первый без единиц измерения, второй с единицами измерения - определяет значение для flex-grow и flex-basis
<style>
.example-3 {
display: flex;
flex-wrap: wrap;
outline: 2px dashed #ccc;
}
.example-3-item {
flex: 0 40%;
padding: 5px;
margin: 2px;
background: #8ee391;
}
</style>
<div class="example-3">
<div class="example-3-item">текст текст текст</div>
<div class="example-3-item">текст текст</div>
<div class="example-3-item">текст</div>
</div>текст текст текст
текст текст
текст
flex: 1 1;
Если указано два параметра и оба без единиц измерения - определяет значение для flex-grow и flex-shrink
<style>
.example-4 {
display: flex;
outline: 2px dashed #ccc;
}
.example-4-item {
flex: 1 1;
padding: 5px;
margin: 2px;
background: #8ee391;
}
</style>
<div class="example-4">
<div class="example-4-item">текст текст текст</div>
<div class="example-4-item">текст текст</div>
<div class="example-4-item">текст</div>
</div>текст текст текст
текст текст
текст
flex: 1 1 50%;
Если указаны все три параметра, определяет flex-grow, flex-shrink, flex-basis
<style>
.example-5 {
display: flex;
flex-wrap: wrap;
outline: 2px dashed #ccc;
}
.example-5-item {
flex: 1 1 40%;
padding: 5px;
margin: 2px;
background: #8ee391;
}
</style>
<div class="example-5">
<div class="example-5-item">текст текст текст</div>
<div class="example-5-item">текст текст</div>
<div class="example-5-item">текст</div>
</div>текст текст текст
текст текст
текст