One: display:flex layout
display:flex 是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。是W3C提出的一种新的方案，可以简便、完整、
响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear
和vertical-align属性将失效。Two: the six attributes of flex
①, flex-direction The arrangement direction of the elements in the container (the default arrangement is horizontal)
1: flex-direction:row; Arrange the elements from left to right along the horizontal axis
2: flex-direction:column; Let the elements are arranged vertically from top to bottom along the vertical axis
3: flex-direction: row-reverse; arrange the elements from right to left along the horizontal axis
②, the wrapping of elements in the flex-wrap container (no wrapping by default)
1：flex-wrap: nowrap; (默认)元素不换行,比如：一个div宽度100%，设置此属性后，
2个div宽度就自动变成各50%；
2：flex-wrap: wrap; 元素换行,比如：一个div宽度100%，设置此属性，第二个div就在第二行了；③, the arrangement of justify-content elements on the main axis (page)
1: justify-content: center; elements are arranged in the center on the main axis (page)
2: justify-content: flex-start; elements are arranged from left or top on the main axis (page)
3: justify-content: flex-end; elements are arranged from the right or bottom on the main axis (page)
4: justify-content: space-between; elements start to be arranged on the left and right ends or the upper and lower ends on the main axis (page)
5: justify-content: space-around; The space on both sides of each element is equal. Therefore, the space between the elements is twice as large as the space between the elements and the border.
④ The alignment of align-items element in the horizontal axis (vertical axis) direction of the current line of the main axis (page)
1: align-items: flex-start; The boundary of the starting position of the lateral axis (vertical axis) of the flex box element is close to the starting boundary of the lateral axis of the row (aligned above).
2: align-items: flex-end; The boundary of the start position of the lateral axis (vertical axis) of the flexbox element is close to the end boundary of the lateral axis of the row. (Align bottom)
3: align-items: center; The elastic box element is placed in the center on the lateral axis (vertical axis) of the row. (Center aligned)
4: align-items: baseline; If the inline axis and the lateral axis of the flexbox element are the same, this value is equivalent to'flex-start'. In other cases, this value will participate in baseline alignment. (Align top)
⑤, align-content align the items in the container when the elements in the elastic container do not occupy all the available space on the cross axis (vertical)
<div id="main">
<div style="background-color:coral;"></div>
<div style="background-color:lightblue;"></div>
<div style="background-color:pink;"></div>
</div>#main {
width: 70px;
height: 300px;
border: 1px solid #c3c3c3;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-align-content: center;
align-content: flex-start;
}
#main div {
width: 70px;
height: 70px;
}1: align-content: flex-start; The element is located at the beginning of the container. The rows are stacked toward the starting position of the elastic box container.
2: align-content: flex-end; The element is located at the end of the container. The rows are stacked toward the end of the elastic box container.
3:align-content:center; The element is located in the center of the container. The rows are stacked toward the middle of the elastic box container.
4:align-content:stretch; The default value. The elements are stretched to fit the container. The rows will stretch to take up the remaining space. If the remaining space is negative, the value is equivalent to'flex-start'.
5: align-content: space-between; The element is located in a container with a blank space between the rows. The rows are evenly distributed in the elastic box container.
6: align-content: space-around; The element is located in a container with blank spaces before, between, and after each line. The rows are evenly distributed in the flexbox container, and half of the distance between the child element and the child element is reserved at both ends. If the remaining space is negative or there is only one row in the flexbox container, this value is equivalent to'center'.
⑥、
Summary of common flex properties
Positional alignment
justify-content: center;: arrange in the center
justify-content: flex-start; /* arrange from the beginning of the line /
justify-content: flex-end; / arrange from the end of the line*/
Author: Yang Yang 1314
link: https: //www.jianshu.com/p/d9373a86b748/
Source: Jane book
Jane book copyright reserved by the authors, are reproduced in any form, please contact the author to obtain authorization and indicate the source.