CSS flex
Предисловие:
年前公司招进来一个高级前端,最近闲谈中聊到了他之前找工作面试时的情况。
在对大佬油然起敬的同时,深感自己的不足。便产生了再次写博客的想法。
写博文一方面巩固以前的知识,另一方面记录和督促学习新的知识内容。
1. Знакомство с флексом
flex — это сокращение от flexible, что означает гибкую компоновку, которая используется для обеспечения максимальной гибкости блочной модели.
Для гибкой компоновки можно указать любой контейнер (включая встроенные элементы):
div { display: flex}
После того, как элемент установит свойство flex, его выравнивание по вертикали с плавающей запятой будет недействительным.
2. Сравнение гибкого макета и обычного макета
-
Генеральный план:
- Элементы блочного уровня располагаются сверху вниз.
- Элемент имеет только высоту, когда нет ширины, ширина по умолчанию равна 100%.
- Элемент имеет только ширину, если нет высоты, высота равна 0
-
гибкий макет
- Элементы в контейнере по умолчанию располагаются слева направо.
- Элемент имеет только высоту, если ширины нет, ширина равна 0
- Когда элемент имеет только ширину и не имеет высоты, высота по умолчанию равна 100%.
Элемент, который становится flex-контейнером, по умолчанию имеет две оси: горизонтальную главную ось (основную ось) и вертикальную поперечную ось (поперечную ось). Пространство главной оси, занимаемое одним элементом, называется основным размером, а поперечная ось — размер креста.Следующее изображение очень хорошо объяснено:
3. гибкое свойство
- flex-direction изменяет направление главной оси, по умолчанию используется горизонтальное расположение строк. Свойства включают строку | реверс строки | столбец | реверс столбца
- flex-wrap управляет обтеканием элементов. Свойства включают nowrap | wrap | wrap-reverse
- align-content управляет выравниванием нескольких осей. Это свойство не действует, если элемент имеет только одну ось. Свойства включают flex-start | flex-end | center | space-between | space-around | stretch
- justify-content управляет выравниванием по главной оси. Свойства включают flex-start | flex-end | center | space-between | space-around
- align-items контролирует, как выравнивать по поперечной оси. Включенные свойства: flex-start | flex-end | center | исходный | растянуть
- Свойство align-self позволяет одному элементу иметь выравнивание, отличное от других элементов. Включенные свойства auto | flex-start | flex-end | center | baseline | stretch
- Атрибут order управляет порядком расположения элементов, чем меньше значение, тем выше расположение.
- Свойство flex-grow определяет коэффициент увеличения элемента, по умолчанию 0, то есть если осталось место, он не будет увеличен.
- Свойство flex-shrink определяет коэффициент сжатия элемента, по умолчанию равен 1, то есть если места недостаточно, элемент сожмется.
- Свойство flex-basis определяет пространство, которое элемент занимает на главной оси.По умолчанию используется значение auto , которое является исходным размером элемента.
- Свойство flex является сокращением для flex-grow, flex-shrink и flex-basis со значением по умолчанию 0 1 auto.
Вы можете использовать flex, чтобы реализовать расположение сита, а также использовать свойства flex.
4. Применение флекса
- Центрированное расположение может быть достигнуто с помощью flex
<style>
/* 使用 flex 进行布局 */
.wrap {
display: flex;
justify-content: center;
align-items: center;
height: 400px;
width: 100%;
border-bottom: 1px solid black;
}
.box {
height: 200px;
width: 200px;
background: red;
}
</style>
<body>
<div class="wrap">
<div class="box"></div>
</div>
</body>
- Используйте flex для создания простого гибкого масштабируемого макета.
<style>
* {
margin: 0;
padding: 0;
}
body, html {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
header {
flex: 0 0 100px;
background: #cecece;
}
.content {
flex: 1;
background: yellow;
display: flex;
}
aside {
background: pink;
flex: 0 1 25%;
}
section {
flex: 1;
}
footer {
flex-basis: 70px;
background: red;
}
</style>
</head>
<body>
<header>
header
</header>
<div class="content">
<aside></aside>
<section></section>
</div>
<footer>
footer
</footer>
</body>
Быстрее и удобнее использовать flex, чем float, но его совместимость с младшими версиями IE не очень хорошая. В случае требований IE рекомендуется использовать плавающую компоновку.