Свойство 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>
текст текст текст
текст текст
текст

Читайте также

Обсуждение (0)

Войдите или зарегистрируйтесь для того чтобы оставлять комментарии