CSS Гнучкий (flex) контейнер
Батьківський елемент (контейнер)
Як ми вказали в попередньому розділі, це гнучкий контейнер (синя область) з трьома гнучкими елементами:
1
2
3
Гнучкий (flex) контейнер стає гнучким, якщо для властивості display встановлено значення flex:
Властивості гнучкого (flex) контейнера:
Властивість flex-direction
Властивість flex-direction визначає, в якому напрямку контейнер хоче складувати гнучкі елементи.
1
2
3
Приклад
Значення column складує гнучкі елементи по вертикалі (згори вниз):
.flex-container {
display: flex;
flex-direction: column;
}
Спробуйте самі »
Приклад
Значення column-reverse складує гнучкі елементи по вертикалі (але знизу вгору):
.flex-container {
display: flex;
flex-direction: column-reverse;
}
Спробуйте самі »
Приклад
Значення row складує гнучкі елементи по горизонталі (зліва направо):
.flex-container {
display: flex;
flex-direction: row;
}
Спробуйте самі »
Приклад
Значення row-reverse складує гнучкі елементи по горизонталі (але справа наліво):
.flex-container {
display: flex;
flex-direction: row-reverse;
}
Спробуйте самі »
Властивість flex-wrap
Властивість flex-wrap визначає, чи повинні елементи гнучкості обертатися, чи ні.
В наведених нижче прикладах є 12 гнучких елементів, щоб краще продемонструвати властивість flex-wrap.
1
2
3
4
5
6
7
8
9
10
11
12
Приклад
Значення wrap визначає, що гнучкі елементи будуть переноситись при необхідності:
.flex-container {
display: flex;
flex-wrap: wrap;
}
Спробуйте самі »
Приклад
Значення nowrap визначає, що гнучкі елементи не будуть переноситися (за замовчуванням):
.flex-container {
display: flex;
flex-wrap: nowrap;
}
Спробуйте самі »
Приклад
Значення wrap-reverse визначає, що гнучкі елементи будуть упаковані при необхідності в зворотньому порядку:
.flex-container {
display: flex;
flex-wrap: wrap-reverse;
}
Спробуйте самі »
Властивість flex-flow
Властивість flex-flow - це скорочена властивість для встановлення властивостей flex-direction та flex-wrap.
Властивість justify-content
Властивість justify-content використовується для вирівнювання гнучких елементів:
1
2
3
Приклад
Значення center вирівнює гнучкі елементи в центрі контейнера:
.flex-container {
display: flex;
justify-content: center;
}
Спробуйте самі »
Приклад
Значення flex-start вирівнює гнучкі елементи на початку контейнера (за замовчуванням):
.flex-container {
display: flex;
justify-content: flex-start;
}
Спробуйте самі »
Приклад
Значення flex-end вирівнює гнучкі елементи в кінці контейнера:
.flex-container {
display: flex;
justify-content: flex-end;
}
Спробуйте самі »
Приклад
Значення space-around відображає гнучкі елементи з пробілом до, поміж та після рядків:
.flex-container {
display: flex;
justify-content: space-around;
}
Спробуйте самі »
Приклад
Значення space-between відображає елементи гибкости с пробелом между строками:
.flex-container {
display: flex;
justify-content: space-between;
}
Спробуйте самі »
Властивість align-items
Властивість align-items використовується для вирівнювання гнучких елементів.
1
2
3
В цих прикладах ми використовуємо контейнер висотою 200 пікселів, щоб краще продемонструвати властивість align-items.
Приклад
Значення center вирівнює гнучкі елементи в середині контейнера:
.flex-container {
display: flex;
height: 200px;
align-items: center;
}
Спробуйте самі »
Приклад
Значення flex-start вирівнює гнучкі елементи в верхній частині контейнера:
.flex-container {
display: flex;
height: 200px;
align-items: flex-start;
}
Спробуйте самі »
Приклад
Значення flex-end вирівнює гнучкі елементи в нижній частині контейнера:
.flex-container {
display: flex;
height: 200px;
align-items: flex-end;
}
Спробуйте самі »
Приклад
Значення stretch розтягує гнучкі елементи, щоб заповнити контейнер (за замовчуванням):
.flex-container {
display: flex;
height: 200px;
align-items: stretch;
}
Спробуйте самі »
Приклад
Значення baseline вирівнює гнучкі елементи, наприклад вирівнює їх базові лінії:
.flex-container {
display: flex;
height: 200px;
align-items: baseline;
}
Примітка: В прикладі використовується інший розмір шрифту, щоб продемонструвати вирівнювання елементів по базовій лінії тексту:
1
2
3
Властивість align-content
Властивість align-content використовується для вирівнювання гнучких ліній.
1
2
3
4
5
6
7
8
9
10
11
12
В цих прикладах ми використовуємо контейнер висотою 600 пікселів з властивістю flex-wrap, встановленою на wrap, щоб краще продемонструвати властивість align-content.
Приклад
Значення space-between відображає гнучкі лінії з рівним простором міє ними:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-between;
}
Спробуйте самі »
Приклад
Значення space-around відображає гнучкі лінії з пробілом до, поміж та після них:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-around;
}
Спробуйте самі »
Приклад
Значення stretch розтягує гнучкі лінії, щоб зайняти залишений простір (за замовчуванням):
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: stretch;
}
Спробуйте самі »
Приклад
Значення center відображає гнучкі лінії в середині контейнера:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: center;
}
Спробуйте самі »
Приклад
Значення flex-start відображає гнучкі лінії на початку контейнера:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-start;
}
Спробуйте самі »
Приклад
Значення flex-end відображає гнучкі лінії в конці контейнера:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-end;
}
Спробуйте самі »
Ідеальне центрування
В наступному прикладі ми вирішимо дуже розповсюджену проблему стилю: ідеальне центрування.
РІШЕННЯ: Встановіть для властивостей justify-content та align-items значення center, і гнучкий елемент буде ідеально центровано:
Приклад
.flex-container {
display: flex;
height: 300px;
justify-content: center;
align-items: center;
}
Спробуйте самі »
Властивості контейнера CSS Flexbox
В наступній таблиці перераховані всі властивості контейнера CSS Flexbox:
| Властивості | Опис |
|---|---|
| align-content | Змінює поведінку властивості flex-wrap. Це схоже на align-items, але замість вирівнювання гнучких елементів це вирівнює гнучкі лінії |
| align-items | Вертикальне вирівнювання гнучких елементів, коли елементи не використовують весь доступний простір на поперечній осі |
| display | Визначає тип поля, що використовується для елемента HTML |
| flex-direction | Задає напрямок гнучких елементів всередині гнучкого контейнера |
| flex-flow | Скорочена властивість для flex-direction та flex-wrap |
| flex-wrap | Визначає, чи мають гнучкі елементи обертатися, чи ні, якщо для них недостатньо місця на одній гнучкій лінії |
| justify-content | Горизонтально вирівнює гнучкі елементи, коли елементи не використовують весь доступний простір на головній осі |
