Flex-элементы CSS
Любой элемент, размещённый непосредственно внутри flex-контейнера, становится flex-элементом без дополнительных действий.
Вот свойства, доступные flex-элементам:
order— определяет, на каком месте в порядке отображения внутри контейнера находится элементflex-grow— определяет, насколько сильно растёт элемент по сравнению с соседними элементамиflex-shrink— определяет, насколько сильно сжимается элемент по сравнению с соседними элементамиflex-basis— задаёт длину, с которой начинает элементflex— объединяетflex-grow,flex-shrinkиflex-basisв одну сокращённую записьalign-self— выравнивает один конкретный элемент внутри контейнера
Свойство CSS order
Порядок в исходном коде и визуальный порядок могут различаться: flex-элемент, идущий первым в коде, не обязательно окажется первым в макете. Внутри flex-контейнера последовательность определяет order.
Ему нужно задать число, и по умолчанию это число равно 0.
Пример
У каждого элемента ниже есть значение order, которое задаёт его место в макете:
Prompt
Создайте flex-контейнер с четырьмя элементами, пронумерованными от 1 до 4. Используйте свойство CSS order, чтобы отобразить их в порядке: 4, 2, 1, 3 (элемент 1 имеет order 3, элемент 2 имеет order 2, элемент 3 имеет order 4, элемент 4 имеет order 1).
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS order Property</title>
<style>
.flex-container {
display: flex;
background-color: #f1f1f1;
}
.flex-container > div {
background-color: DodgerBlue;
color: white;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The order Property</h1>
<div class="flex-container">
<div style="order: 3">1</div>
<div style="order: 2">2</div>
<div style="order: 4">3</div>
<div style="order: 1">4</div>
</div>
</body>
</html>
Свойство CSS flex-grow
Число, заданное в flex-grow, показывает, насколько сильно растёт элемент по сравнению с соседними элементами.
Здесь допустимо только число, а значение по умолчанию — 0.
Пример
Третий элемент здесь растёт в четыре раза быстрее двух соседних:
Prompt
Создайте flex-контейнер с тремя элементами. Задайте элементам 1 и 2 flex-grow равным 1, а элементу 3 — flex-grow равным 4, чтобы он рос в четыре раза быстрее остальных.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS flex-grow Property</title>
<style>
.flex-container {
display: flex;
background-color: #f1f1f1;
}
.flex-container > div {
background-color: DodgerBlue;
color: white;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The flex-grow Property</h1>
<div class="flex-container">
<div style="flex-grow: 1">1</div>
<div style="flex-grow: 1">2</div>
<div style="flex-grow: 4">3</div>
</div>
</body>
</html>
Свойство CSS flex-shrink
Число, заданное в flex-shrink, показывает, насколько сильно сжимается элемент по сравнению с соседними элементами.
Здесь снова допустимо только число, но на этот раз значение по умолчанию — 1.
Пример
Здесь третий элемент сжимается в два раза сильнее всех остальных:
Prompt
Создайте flex-контейнер с шестью элементами, пронумерованными от 1 до 6. Установите ширину каждого элемента равной 100px. Задайте третьему элементу значение flex-shrink равным 2, чтобы он сжимался в два раза сильнее остальных.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS flex-shrink Property</title>
<style>
.flex-container {
display: flex;
background-color: #f1f1f1;
}
.flex-container > div {
background-color: DodgerBlue;
color: white;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The flex-shrink Property</h1>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-shrink: 2">3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
Свойство CSS flex-basis
Начальную длину элемента задаёт flex-basis.
Пример
Третий элемент здесь начинается с длины 250 пикселей:
Prompt
Создайте flex-контейнер с четырьмя элементами. Установите для третьего элемента flex-basis равным 250px, чтобы он имел большую начальную длину, чем остальные элементы.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS flex-basis Property</title>
<style>
.flex-container {
display: flex;
background-color: #f1f1f1;
}
.flex-container > div {
background-color: DodgerBlue;
color: white;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The flex-basis Property</h1>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-basis: 250px">3</div>
<div>4</div>
</div>
</body>
</html>
Свойство CSS flex
Вместо трёх отдельных объявлений для flex-grow, flex-shrink и flex-basis можно написать одну сокращённую запись flex.
Пример
Третий элемент здесь может расти (1), не может сжиматься (0) и начинается с длины 150 пикселей:
Prompt
Создайте flex-контейнер с четырьмя элементами. Примените сокращённое свойство flex к третьему элементу со значениями 1 0 150px (может расти, не может сжиматься, начальная длина 150px).
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS flex Shorthand Property</title>
<style>
.flex-container {
display: flex;
background-color: #f1f1f1;
}
.flex-container > div {
background-color: DodgerBlue;
color: white;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The flex Property</h1>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex: 1 0 150px">3</div>
<div>4</div>
</div>
</body>
</html>
Свойство CSS align-self
Свойство align-items контейнера задаёт выравнивание по умолчанию. Для одного конкретного элемента внутри flex-контейнера align-self переопределяет это значение.
Align-self center
Третий элемент здесь находится по центру контейнера:
Prompt
Создайте flex-контейнер высотой 200px с четырьмя элементами. Используйте align-self, чтобы выровнять третий элемент по вертикали по центру контейнера.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS align-self center</title>
<style>
.flex-container {
display: flex;
height: 200px;
background-color: #f1f1f1;
}
.flex-container > div {
background-color: DodgerBlue;
color: white;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The align-self Property</h1>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="align-self: center">3</div>
<div>4</div>
</div>
</body>
</html>
Align-self flex-start и flex-end
Здесь второй элемент перемещается в верхнюю часть контейнера, а третий — в нижнюю:
Prompt
Создайте flex-контейнер высотой 200px с четырьмя элементами. Используйте align-self, чтобы выровнять второй элемент по flex-start (сверху), а третий элемент по flex-end (снизу).
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS align-self flex-start and flex-end</title>
<style>
.flex-container {
display: flex;
height: 200px;
background-color: #f1f1f1;
}
.flex-container > div {
background-color: DodgerBlue;
color: white;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The align-self Property</h1>
<div class="flex-container">
<div>1</div>
<div style="align-self: flex-start">2</div>
<div style="align-self: flex-end">3</div>
<div>4</div>
</div>
</body>
</html>
Свойства flex-элементов CSS
Все свойства flex-элементов в алфавитном порядке:
align-self— выравнивает один flex-элемент, переопределяя свойствоalign-itemsего flex-контейнераflex— сокращённая запись дляflex-grow,flex-shrinkиflex-basisflex-basis— задаёт начальную длину flex-элементаflex-grow— задаёт, насколько сильно растёт flex-элемент по сравнению с остальнымиflex-shrink— задаёт, насколько сильно сжимается flex-элемент по сравнению с остальнымиorder— задаёт место flex-элементов в последовательности внутри контейнера