【Foreword】
I've used flex before, but I haven't had a deep understanding of it. I remembered it today, so let's summarize it.
This is a new layout method display:flex. Let's summarize the related properties and syntax of flex flexible layout.
【Compared】
Traditional layout: Based on the box model, relying on display property + position property + float property. It is very inconvenient for those special layouts, for example, vertical centering is not easy to achieve
Flexible layout: It can be applied to both container and inline elements. (The above description is combined with the description of WeChat developer tools) In 2009, a new layout scheme proposed by W3C can realize various page layouts in a simple, complete and responsive manner. Currently, it is supported by all browsers, which means it is safe to use this feature now
【principle】
Flexbox layouts are designed to provide a more efficient way to lay out, align, and allocate space for child elements within a container, even if their size is unspecified or dynamically changing.
The principle behind the Flexbox layout is to give the parent container the ability to change the width and height (or order) of the child elements to better fill the available space (mainly adapting it to various display devices and screen sizes). A parent container using Flexbox layout stretches each child element to fill the available space, or compresses them to prevent it from exceeding the parent container.
On top of that, Flexbox layouts are unpredictable in orientation, unlike normal layouts (where blocks are arranged vertically, while inline is horizontal). These conventional layouts are fine to display on the page, but they lack flexibility and are difficult to support the needs of large and complex applications, especially in response to changes in orientation, size, stretch, and shrink.
Note : Flexbox is best used for components and small-scale layouts. For more complex layouts, Grid layouts are better.
Since Flexbox is a complete module, it is not just a property, but contains a whole new set of properties, so there are a lot of new things involved. Some of these properties are used to set the parent container, while others are used to set the child elements.
【Introduction】
①Flex is the abbreviation of Flexible Box, which means "flexible layout", which is used to provide maximum flexibility for the box model;
②After setting to Flex layout, the float, clear and vertical-align properties of child elements will be invalid;
③ that can be applied to the container
.box{display: flex;}
Can also be applied to inline elements
.box{display: inline-flex;}
④Webkit-based browsers must be prefixed with -webkit
.box{
display: -webkit-flex; /* Safari */
display: flex;
}
【Container Properties】
It mainly contains the following 6 container properties: flex-direction (direction), flex-wrap (line wrap), flex-flow (flow), justify-content (content), align-items (alignment items), align-content (alignment content) )
The following are in turn
(1) flex-direction (direction)
Determines the orientation of the main axis (i.e. the direction in which items are arranged)
Property value:
flex-direction: row row | row-reverse row reverse | column column | column-reverse column reverse;
row (default): the main axis is horizontal, arranged from left to right;
row-reverse: the main axis is horizontal, arranged from right to left;
column: the main axis is vertical, arranged from top to bottom;
column-reverse: the main axis is vertical, arranged from bottom to top
(2) flex-wrap (line wrap)
Defines how to wrap if one grid line does not fit (by default, items are arranged on one line, also known as "grid line")
Property value:
flex-wrap: nowrap does not wrap | wrap wraps | wrap-reverse reverses lines;
nowrap (default): do not wrap;
wrap: wrap, the first line is above;
wrap-reverse: wrap, the first line is below
(3) flex-flow (flow)
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap（水平不换行）
语法：
flex-flow: <flex-direction> || <flex-wrap>;
（4）justify-content（内容）
定义了项目在主轴上的对齐方式，即水平对齐方式
属性值：
justify-content: flex-start | flex-end | center | space-between | space-around;
具体对齐方式与轴的方向有关，下面假设主轴为从左到右
flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍
（5）align-items（对齐项）
定义项目在交叉轴上的对齐方式，即垂直对齐方式
属性值：
align-items:flex-start顶部 | flex-end底部 | center中心 | baseline基线 | stretch伸展;
具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下
flex-start：交叉轴的起点（顶部）对齐
flex-end：交叉轴的终点（底部）对齐
center：交叉轴的中点对齐
baseline: 项目的第一行文字的基线对齐
stretch（伸展，默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度
（6）align-content（对齐内容）
定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
flex-start：与交叉轴的起点对齐
flex-end：与交叉轴的终点对齐
center：与交叉轴的中点对齐
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
stretch（伸展，默认值）：轴线占满整个交叉轴
【项目属性】
主要包含以下6个项目属性：order（序列索引），flex-grow（增大比例），flex-shrink（缩小比例），flex-basis（主轴基础空间），flex（弹性），align-self（自己独立对齐）
（1）order（索引序列）
定义项目的排列顺序。数值越小，排列越靠前，默认为0
属性值：
order: <integer整数>;
（2）flex-grow（增大比例）
定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
属性值：
flex-grow: <number>;/*默认0*/
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍
（3）flex-shrink（缩小比例）
定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
flex-shrink: <number>; /*默认1 */
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，当空间不足时，前者不缩小；负值对该属性无效
（4）flex-basis（主轴基础空间）
定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
属性值：
flex-basis: <length> | auto; /*默认auto */
它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间
（5）flex（弹性）
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
语法：
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值
（6）align-self（自己独立对齐）
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性
默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
属性值：
align-self: auto | flex-start | flex-end | center | baseline | stretch;
该属性可能取6个值，除了auto继承，其他都与align-items属性完全一致。
具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下
auto：继承父元素的align-items属性，如果没有父元素，则等同于stretch
flex-start：交叉轴的起点（顶部）对齐
flex-end：交叉轴的终点（底部）对齐
center：交叉轴的中点对齐
baseline: 项目的第一行文字的基线对齐
stretch（伸展，默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度
参考资料：
①http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
②https://www.cnblogs.com/xuyuntao/articles/6391728.html
.