Рассмотрим на примере.
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flexbox</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
</div>
</body>
</html>
style.css
.flex-container {
border: 2px solid #ccc;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
height: 500px;
flex-wrap: wrap;
align-content: stretch;
/*
display: flex; - все элементы внутри выстраиваются подобно ячейкам таблицы, контейнер растягивается на всю ширину.
display: inline-flex; - контейнер растягивается на ширину ячеек.
ПОСТРОЕНИЕ по x (слева - направо) и y (сверху - вниз) осям
Горизонталь:
flex-direction: row; - направление ряда слева направо, значение по умолчанию.
flex-direction: row-reverse; - меняет направление и расставляет элементы справа налево.
Вертикаль:
flex-direction: column; - ось идет по вертикали
flex-direction: column-reverse; - меняет направление и расставляет элементы сверху вниз
ВЫРАВНИВАНИЕ КОНТЕНТА
justify-content: flex-start; - значение по умолчанию, все элементы прижимаются к началу главной оси
justify-content: flex-end; - элементы прижимаются к концу оси
justify-content: center; - выравнивание элементов по центру
justify-content: space-between; - элементы растягиваются по оси x или y
justify-content: space-around;- выравнивание по оси справа и слева, как содержимое ячейки в таблице
Управление положением элемента:
align-self: auto | flex-start | flex-end | center | baseline;
Это свойство похоже на justify-content.
justify-content управляет всеми элементами в контейнете.
align-self управляет одним элементом.
ВЫРАВНИВАНИЕ ЭЛЕМЕНТОВ
align-items: stretch; - выравнивание элементов вдоль поперечной оси, значение по умолчанию, элементы растягиваются на всю высоту поперечной оси
align-items: flex-end; - элементы уплывают вниз по поперечной оси
align-items: flex-start; - элементы уплывают вверх по поперечной оси, элементы прижимаются к верхней границе
align-items: center; - элементы уплывают на середину по поперечной оси
align-items: baseline; - элементы выравниваются по базовой линии, допустим по окончанию текста
ПЕРЕНОС ЭЛЕМЕНТОВ
Явное задание ширины flex-элементов не влияет на их перенос на новые ряды.
flex-wrap: nowrap; - по умолчанию, переносов на новые ряды нет
flex-wrap: wrap; - перенос элементов, теперь в зависимости от ширины элементов происходит перенос
flex-wrap: wrap-reverse; меняет расположение рядов с элементами
РАСТЯГИВАНИЕ РЯДОВ ОТНОСИТЕЛЬНО ПОПЕРЕЧНОЙ ОСИ
align-content: stretch; - по умолчанию, ряды расягиваются на всю лину поперечной оси
align-content: center; - выравнивание рядов по центру поперечной оси
align-content: flex-start;
ОБЪЕДИНЕНИЕ СВОЙСТВ
Чтобы не писать свойства:
flex-direction: column;
flex-wrap: wrap;
Можно написать так: flex-flow: column wrap;
ПОРЯДОК ЭЛЕМЕНТОВ определяется свойством order
order: 1;
Для создания разных длин у элементов
flex-grow: 5;
Элемент на 100px шире, чем другие элементы.
flex-basis: 100px;
*/
}
.flex-item {
background: #59a94a;
text-align: center;
padding: 10px;
margin: 10px;
width: 165px;
}
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flexbox</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
</div>
</body>
</html>
style.css
.flex-container {
border: 2px solid #ccc;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
height: 500px;
flex-wrap: wrap;
align-content: stretch;
/*
display: flex; - все элементы внутри выстраиваются подобно ячейкам таблицы, контейнер растягивается на всю ширину.
display: inline-flex; - контейнер растягивается на ширину ячеек.
ПОСТРОЕНИЕ по x (слева - направо) и y (сверху - вниз) осям
Горизонталь:
flex-direction: row; - направление ряда слева направо, значение по умолчанию.
flex-direction: row-reverse; - меняет направление и расставляет элементы справа налево.
Вертикаль:
flex-direction: column; - ось идет по вертикали
flex-direction: column-reverse; - меняет направление и расставляет элементы сверху вниз
ВЫРАВНИВАНИЕ КОНТЕНТА
justify-content: flex-start; - значение по умолчанию, все элементы прижимаются к началу главной оси
justify-content: flex-end; - элементы прижимаются к концу оси
justify-content: center; - выравнивание элементов по центру
justify-content: space-between; - элементы растягиваются по оси x или y
justify-content: space-around;- выравнивание по оси справа и слева, как содержимое ячейки в таблице
Управление положением элемента:
align-self: auto | flex-start | flex-end | center | baseline;
Это свойство похоже на justify-content.
justify-content управляет всеми элементами в контейнете.
align-self управляет одним элементом.
ВЫРАВНИВАНИЕ ЭЛЕМЕНТОВ
align-items: stretch; - выравнивание элементов вдоль поперечной оси, значение по умолчанию, элементы растягиваются на всю высоту поперечной оси
align-items: flex-end; - элементы уплывают вниз по поперечной оси
align-items: flex-start; - элементы уплывают вверх по поперечной оси, элементы прижимаются к верхней границе
align-items: center; - элементы уплывают на середину по поперечной оси
align-items: baseline; - элементы выравниваются по базовой линии, допустим по окончанию текста
ПЕРЕНОС ЭЛЕМЕНТОВ
Явное задание ширины flex-элементов не влияет на их перенос на новые ряды.
flex-wrap: nowrap; - по умолчанию, переносов на новые ряды нет
flex-wrap: wrap; - перенос элементов, теперь в зависимости от ширины элементов происходит перенос
flex-wrap: wrap-reverse; меняет расположение рядов с элементами
РАСТЯГИВАНИЕ РЯДОВ ОТНОСИТЕЛЬНО ПОПЕРЕЧНОЙ ОСИ
align-content: stretch; - по умолчанию, ряды расягиваются на всю лину поперечной оси
align-content: center; - выравнивание рядов по центру поперечной оси
align-content: flex-start;
ОБЪЕДИНЕНИЕ СВОЙСТВ
Чтобы не писать свойства:
flex-direction: column;
flex-wrap: wrap;
Можно написать так: flex-flow: column wrap;
ПОРЯДОК ЭЛЕМЕНТОВ определяется свойством order
order: 1;
Для создания разных длин у элементов
flex-grow: 5;
Элемент на 100px шире, чем другие элементы.
flex-basis: 100px;
*/
}
.flex-item {
background: #59a94a;
text-align: center;
padding: 10px;
margin: 10px;
width: 165px;
}
Комментариев нет:
Отправить комментарий