Веб-макет — фокус CSS
нормальный поток
float + clear
position relative + absolute
display
отрицательная маржа
Эти свойства используются в сочетании для достижения желаемой страницы во время макета страницы, но для некоторых специальных макетов реализация немного проблематична.
1 Введение в макет Flex
Flex — это аббревиатура от Flexible Box, что означает «гибкая компоновка».
1.1 Возможности гибкого макета
- Макет на уровне блоков фокусируется на вертикальном направлении, встроенный макет фокусируется на горизонтальном направлении, а гибкий макет не зависит от направления.
- Гибкая компоновка может реализовать автоматическое распределение пространства и автоматическое выравнивание (гибкость, гибкость).
- Гибкая компоновка подходит для простой линейной компоновки, более сложная компоновка использует компоновку сетки.
1.2 Включить раскладку Flex
Когда гибкий макет включен, просто напишите на родительском элементеdisplay: flex;, следующим образом:
.box{
display: flex;
}
//行内元素也可以
.box{
display: inline-flex;
}
//Webkit内核的浏览器，需加上前缀
.box{
display: -webkit-flex;
}
1.3 Основные концепции Flex-контейнеров
Элемент, использующий макет Flex, можно рассматривать как контейнер Flex, и его свойства показаны на следующем рисунке:
flex-directionдля изменения направления распределения основной боковой оси. Поэтому нельзя сказать, что горизонтальное распределение является главной осью, а вертикальное — боковой осью.
2 Свойства родительского элемента
Всего в родительском элементе макета Flex можно установить 6 свойств, а именно:
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
2.1 flex-direction
flex-directionСвойство определяет направление главной оси (как было сказано ранее, нельзя сказать, что горизонталь — главная ось, а вертикаль — боковая ось, из-за этого свойства), и имеет всего 4 значения:
ряд: значение по умолчанию, основная ось горизонтальна слева направо;
row-reverse: главная ось горизонтальна справа налево;
столбец: главная ось вертикальна сверху вниз;
column-reverse: основная ось вертикальна снизу вверх
Диаграмма:
Эффект от реализации кода следующий:
2.2 flex-wrap
По умолчанию дочерние элементы во флекс-контейнере располагаются в ряд, если общая ширина дочерних элементов больше ширины родительского элемента, дочерние элементы будут сжаты.flex-wrapАтрибут может установить перенос дочернего элемента, всего он имеет 3 значения:
nowrap: по умолчанию, без новой строки
wrap: перенос, первая строка выше
Wrap: Wrap, первая строка ниже
Диаграмма:
Диаграмма эффекта реализации кода:
2.3 flex-flow
flex-flowсобственностьflex-directionа такжеflex-wrapкомбинация, это написать эти два свойства вместе, сначала напишитеflex-direction, после написанияflex-wrap, значение по умолчаниюrow nowrap
Диаграмма эффекта реализации кода:
2.4 justify-content
justify-contentАтрибут определяет выравнивание дочерних элементов по главной оси, имеет пять основных значений:
flex-start: по умолчанию, начать сначала
flex-end: выравнивание с конца
центр: выравнивание по центру
space-between: оба конца выровнены, а расстояние между дочерними элементами равно
space-round: расстояние между левым и правым каждым дочерним элементом равно
Диаграмма:
Диаграмма эффекта реализации кода:
2.5 align-items
align-itemsАтрибут определяет выравнивание подэлементов по боковой оси и в основном состоит из 5 значений:
strech: значение по умолчанию, высота дочернего элемента заполняет родительский элемент
flex-start: дочерние элементы выравниваются от начала боковой оси
flex-end: дочерние элементы выравниваются от конца боковой оси
center: дочерние элементы центрируются по боковой оси
Базовая линия: выравнивание по базовой линии первой строки текста дочернего элемента (если размер шрифта несовместим, эффект будет выделен)
Уведомление:При применении этого свойства высота дочернего элемента не может быть записана насмерть, она должна поддерживаться его содержимым
Диаграмма:
Диаграмма эффекта реализации кода:
2.6 align-content
align-contentАтрибут определяет выравнивание нескольких осей подэлементов по боковой оси, что допустимо только при многострочном отображении. В основном принимают следующие 5 значений:
растянуть: значение по умолчанию, ось закрывает боковую ось
flex-start: совместить с началом боковой оси
flex-end: совместить с концом боковой оси
center: выравнивание по средней точке боковой оси
space-between: выровнять по обоим концам бокового вала с одинаковым расстоянием между осями
пространство вокруг: одинаковое расстояние с обеих сторон каждой оси
Диаграмма:
Диаграмма эффекта реализации кода:
3 Атрибуты дочернего элемента
Существует 6 свойств, которые можно задать для дочерних элементов макета Flex, а именно:
flex-grow
flex-shrink
flex-basis
flex
order
align-self
3.1 flex-grow
flex-growАтрибут указывает долю оставшегося пространства, выделяемого каждому дочернему элементу, когда у родительского элемента остается свободное место.0, указывающий на отсутствие распределения; когда это значение, оно указывает долю оставшегося пространства родительского элемента, выделенного каждому дочернему элементу, а не пропорцию размера расширенного дочернего элемента.
Диаграмма эффекта реализации кода:
3.2 flex-shrink
flex-shrinkатрибут сflex-growФункция свойства обратная, это означает, что когда сумма ширины дочерних элементов больше, чем ширина родительского элемента и отображение не свернуто, размер каждого дочернего элемента сжимается.1, что означает, что каждый подэлемент сжимается в равном соотношении; когда значения различны, это означает, что доля размера каждого подэлемента, уменьшается из-за сжатого пространства, а не доля размера поддачи. -элемент после сжатия
Диаграмма эффекта реализации кода:
3.3 flex-basis
flex-basisАтрибут может использоваться для установки пространства дочерних элементов, значение по умолчанию равноauto, выраженный как исходный размер. Когда у родительского элемента есть оставшееся пространство, это свойство можно использовать для расширения пространства дочернего элемента; когда общее пространство каждого дочернего элемента после расширения отверстия превышает размер пространства родительского элемента, нажмитеflex-basisшкала значений для установки размера дочерних элементов, нетflex-basisсвойство, по умолчаниюflex-basisЗначение представляет собой исходный размер дочернего элемента, так что сумма размеров дочернего элемента не может превышать размер пробела родительского элемента.
Диаграмма эффекта реализации кода:
3.4 flex
flexсобственностьflex-grow,flex-shrinkа такжеflex-basisКоллекция , по умолчанию0 1 auto, последние два свойства можно опустить
3.5 order
orderАтрибут определяет порядок расположения дочерних элементов, значение по умолчанию равно0, чем меньше значение, тем продвинутее
Диаграмма эффекта реализации кода:
3.6 align-self
align-selfАтрибуты позволяют дочерним элементам устанавливать свое выравнивание независимо, имея приоритет над родительским элементом.align-itemsвысоко. По умолчаниюauto, что означает наследование от родительского элементаalign-items, если нет родительского элемента, он эквивалентенstretch. Он может устанавливать следующие свойства:
auto: унаследовано от родительского элемента
align-items
stretch
flex-start
flex-end
center
baseline
Кромеautoзначение, остальные значения такие же, как у родительского элементаalign-itemsСвойства имеют тот же эффект
4 Несколько гибких макетов
4.1 Верхняя, средняя и нижняя планировка
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
body{
display: flex;
flex-direction: column;
height: 100vh;
}
header{
height: 100px;
background: #ddd;
}
main{
flex-grow: 1;
}
footer{
height: 100px;
background: #ddd;
}
</style>
</head>
<body>
<header>heafer</header>
<main>main</main>
<footer>footer</footer>
</body>
</html>
Рендеринг кода выглядит следующим образом:
4.2 Цзюгунге
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
*{padding:0;}
ul{
list-style: none;
border: 1px solid black;
width: 170px;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
li{
width: 50px;
height: 50px;
border: 1px solid red;
margin: 5px 0;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
Рендеринг кода выглядит следующим образом:
4.3 Общая компоновка ПК
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
body{
display: flex;
flex-direction: column;
height: 100vh;
}
header{
height: 50px;
background: #ddd;
}
main{
flex-grow: 1;
display: flex;
}
.aside1{
width: 100px;
background: #aaa;
}
.aside2{
flex-grow: 1;
}
.aside3{
width: 100px;
background: #aaa;
}
footer{
height: 50px;
background: #ddd;
}
</style>
</head>
<body>
<header>header</header>
<main>
<aside class="aside1">aside1</aside>
<aside class="aside2">aside2</aside>
<aside class="aside3">aside3</aside>
</main>
<footer>footer</footer>
</body>
</html>
Рендеринг кода выглядит следующим образом:
4.4 Адаптивное абсолютное центрирование
Рендеринг кода выглядит следующим образом: