About display value and display: flex elastic layout in html

Personally, I think that compared to using float layout (floating layout is generally suitable for text wrapping), elastic layout will be more convenient, concise and powerful (this is a long article, the front is the value and attribute table, and the back is the rendering of each attribute )

1. Attributes and their values

Attributes	description and value
display	Specifies the HTML element box type: none: Indicates that this element will not be displayed. block: Elements will be displayed as block-level elements with line breaks before and after. Inline: The element will be displayed as an inline (inline) element, with no line breaks before or after the element inline-block: Inline block element. list-item: The element will be displayed as a list
flex-direction	Specifies the arrangement of child elements in the flex container : row (default value): Arranged horizontally, starting at the left end. row-reverse : Reverse horizontal arrangement, starting at the right end. column : Arranged vertically and vertically, with the starting point at the top. column-reverse : Reverse vertical vertical arrangement, the starting point is below.
justify-content	Set the alignment of flexbox elements in the direction of the main axis (horizontal arrangement is the x-axis, vertical arrangement is the y-axis): flex-start (default): left-aligned flex-end : align right center : centered space-between : Both ends are justified, and the spacing between items is equal. space-around : Equal spacing on both sides of each element. The spacing between items is twice as large as the spacing between items and the border. space-evenly: Each interval is the same size
align-items	Sets the alignment of flexbox elements in the direction of the cross (vertical) axis: flex-start: upper right flex-end: bottom right center: placed in the center baseline: Equivalent to 'flex-start' if the inline axis of the element is the same as the side axis. In other cases, this value will participate in the baseline alignment. stretch: If the attribute value of the specified cross-axis size is 'auto', its value will make the size of the margin box of the item as close as possible to the size of the row, but at the same time it will follow the 'min/max-width/height' attribute limit
flex-wrap	Set whether to wrap when the child elements of the flexbox exceed the parent container: nowrap (default): Do not wrap lines. wrap : wrap, with the first line on top. wrap-reverse : wrap in reverse, with the first line below.
flex-flow	The flex-flow attribute is a shorthand form of the flex-direction attribute and the flex-wrap attribute, and the default value is row nowrap
align-content:	If there is only one axis, then this property will not work , that is, there must be multiple lines of items in the container for this property to have an effect: (the general position is related to the value of flex-directio ) flex-start: Alignment with the cross axis is similar to flex-start . flex-end：与交叉轴的终点对齐与flex-end类似。 center：与交叉轴的中点对齐。 space-between：位置与与交叉轴两端对齐，轴线之间的间隔平均分布。 space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。 stretch（默认值）：轴线占满整个交叉轴（flex-directio平行占满父容器的宽，垂直则占满父容器的高）。
order	设置弹性盒子的子元素排列顺序。(Internet Explorer 和 Safari 不支持 order 属性)
align-self	覆盖容器的 align-items 属性也就是重写了容器的 align-items 属性（允许单个项目有与其他项目不一样的对齐方式）
flex	设置弹性盒子的子元素如何分配空间。
flex-basis	规定弹性项目的初始长度
flex-shrink	flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-grow	定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大