Home > Article > Web Front-end > Detailed explanation of how CSS3 implements flexible layout
1. CSS3 Flexible Box
Flexible box is a new layout mode of CSS3.
CSS3 Flexible Box (Flexible Box or flexbox) is a layout method that ensures that elements have appropriate behavior when the page needs to adapt to different screen sizes and device types.
The purpose of introducing the flexible box layout model is to provide a more efficient way to arrange, align and allocate empty space to sub-elements in a container.
2. Browser support
The number in the table indicates the version number of the first browser that supports this attribute.
The -webkit- or -moz- immediately following the number is the prefix of the specified browser.
| Attributes |  |
 |
 |
 |
 |
| 29.0 21.0 -webkit- | 11.0 | 22.0 18.0 -moz- | 6.1 -webkit- | 12.1 -webkit- | |
| 29.0 21.0 -webkit- | 11.0 | 28.0 | 6.1 -webkit- | 17.0 15.0 -webkit- 12.1 |
3. CSS3 Flexible Box Content
The flexible box is composed of a flexible container (Flex container) and a flexible sub-element (Flex item) . A flexible container is defined as a flexible container by setting the value of the display property to flex or inline-flex. The flexible container contains one or more flexible sub-elements. Note: The outside of the flexible container and inside the flexible sub-element are rendered normally. The flex box only defines how the flex child elements are laid out within the flex container. Flexible sub-elements are usually displayed in one line within the flexible box. By default there is only one row per container. The following elements show the elastic child elements displayed in a row, from left to right:<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>FLEX</title>
<style>
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 1200px;
height: 640px;
background-color: lightsteelblue;
}
.flex-container .flex-item {
width: 320px;
height: 240px;
margin: 10px;
background-color:lightsalmon;
}
</style>
</head>
<body>
<div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
4. CSS3 Flexible Box Commonly used attributes
| Description | |
|---|---|
| Specify the arrangement of child elements in the flexible container | |
| Set whether to wrap the child elements of the flexible box when they exceed the parent container | |
| Abbreviation for flex-direction and flex-wrap | |
| Set the alignment of the flex box elements in the side axis (vertical axis) direction | |
| Modify the behavior of the flex-wrap attribute, similar to align-items, But instead of setting the alignment of child elements, set the row alignment | |
| Set the alignment of the flexible box element in the main axis (horizontal axis) direction |
| 值 | 描述 |
|---|---|
| row | 默认值。元素将水平显示，正如一个行一样。 |
| row-reverse | 与 row 相同，但是以相反的顺序。 |
| column | 元素将垂直显示，正如一个列一样。 |
| column-reverse | 与 column 相同，但是以相反的顺序。 |
2. flex-wrap 属性
flex-wrap 属性规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。
| 值 | 描述 |
|---|---|
| nowrap | 默认值。规定元素不拆行或不拆列。 |
| wrap | 规定元素在必要的时候拆行或拆列。 |
| wrap-reverse | 规定元素在必要的时候拆行或拆列，但是以相反的顺序。 |
.flex-container { flex-wrap: nowrap | wrap | wrap-reverse; }可以取三个值：
（1） nowrap (默认)：不换行。
（2）wrap：换行，第一行在上方。
（3）wrap-reverse：换行，第一行在下方。
3. flex-flow 属性
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
.flex-container { flex-flow: <flex-direction> <flex-wrap> }4. align-items属性
align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。
| 值 | 描述 |
|---|---|
| stretch | 默认值。项目被拉伸以适应容器。 |
| center | 项目位于容器的中心。 |
| flex-start | 项目位于容器的开头。 |
| flex-end | 项目位于容器的结尾。 |
| baseline | 项目位于容器的基线上。 |
5. justify-content属性
justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。
| 值 | 描述 |
|---|---|
| flex-start | 默认值。项目位于容器的开头。 |
| flex-end | 项目位于容器的结尾。 |
| center | 项目位于容器的中心。 |
| space-between | 项目位于各行之间留有空白的容器内。 |
| space-around | 项目位于各行之前、之间、之后都留有空白的容器内。 |
五、弹性子元素属性
| 属性 | 描述 |
|---|---|
| order | 设置弹性盒子的子元素排列顺序。 |
| flex-grow | 设置或检索弹性盒子元素的扩展比率。 |
| flex-shrink | 指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。 |
| flex-basis | 用于设置或检索弹性盒伸缩基准值。 |
| flex | 设置弹性盒子的子元素如何分配空间。 |
| align-self | 在弹性子元素上使用。覆盖容器的 align-items 属性。 |
1. order属性
.flex-container .flex-item { order: <integer>; }2. flex-grow属性
.flex-container .flex-item { flex-grow: <integer>; }3. flex-shrink属性
.flex-container .flex-item { flex-shrink: <integer>; }4. flex-basis属性
.flex-container .flex-item { flex-basis: <integer> | auto; }auto：默认值。长度等于元素的长度。如果该项目未指定长度，则长度将根据内容决定。
5. flex属性
flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。
flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。
.flex-container .flex-item {
flex:flex-grow flex-shrink flex-basis|auto|initial|inherit;
}| 值 | 描述 |
|---|---|
| flex-grow | 一个数字，规定项目将相对于其他元素进行扩展的量。 |
| flex-shrink | 一个数字，规定项目将相对于其他元素进行收缩的量。 |
| flex-basis | 项目的长度。合法值："auto"、"inherit" 或一个后跟 "%"、"px"、"em" 或任何其他长度单位的数字。 |
| auto | 与 1 1 auto 相同。 |
| none | 与 0 0 auto 相同。 |
| initial | 设置该属性为它的默认值，即为 0 1 auto。 |
| inherit | 从父元素继承该属性。 |
6. align-self属性
.flex-container .flex-item {
align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;
}| 值 | 描述 |
|---|---|
| auto | 默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"。 |
| stretch | 元素被拉伸以适应容器。 |
| center | 元素位于容器的中心。 |
| flex-start | 元素位于容器的开头。 |
| flex-end | 元素位于容器的结尾。 |
| baseline | 元素位于容器的基线上。 |
| initial | 设置该属性为它的默认值。 |
| inherit | 从父元素继承该属性。 |
取值同 align-items。
参考
本文转载自：https://www.jianshu.com/p/5856c4ae91f2
相关推荐：CSS视频教程
The above is the detailed content of Detailed explanation of how CSS3 implements flexible layout. For more information, please follow other related articles on the PHP Chinese website!
