flex flexible layout

Flex layout (CSS3 new layout flex)

.box {
    display: flex;/*使box盒子为伸缩布局*/
}

      The flexible layout makes the layout arrangement of block-level elements very flexible and adaptable, which plays a great role in responsive development.

      An element that adopts a flex layout is called a flex container, and all its child elements automatically become members of the container, which is called a flex item.

       There are two axes in a flex container, the main axis (horizontal) and the side axis (vertical). By default, flex items are arranged in the direction of the main axis.

---

The following describes the related properties of the flexible layout: (take the following as an example)

<!-- 对box盒子设置伸缩布局，宽度为1000px，高度省略，居中显示 -->
<div class="box">
    <!-- 对伸缩容器中的盒子，宽高均为200px，margin5px -->
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

.box {
    width: 1000px;
    border: 1px solid #000;
    margin: 5px auto;
}
.box>div {
    width: 200px;
    height: 200px;
    background-color: pink;
    margin: 5px;
}

1. flex-direction: Set the arrangement of members in the flex container

flex-direction: row;/* 默认值--以主轴方向排列  水平方向排列 */

flex-direction: column;/* 以侧轴方向排列 垂直方向排列*/

flex-direction: row-reverse;/* 以主轴反方向排列 水平反方向排列*/

flex-direction: column-reverse;/* 以侧轴反方向排列 垂直反方向排列*/

---

2. justify-content: used to specify the alignment of the main axis

justify-content：flex-start; /* 容器成员水平方向左对齐 */

justify-content：flex-end; /* 容器成员水平方向右对齐 */

 justify-content：center; /* 容器成员水平方向居中 */

justify-content：space-around; /* 容器成员水平方向自动平分间距*/

justify-content： space-between; /* 容器成员水平方向自动平分（两端对其）*/

---

3. align-items: used to specify the alignment of the side axis ————————

   align-items: flex-start;  /* 容器成员垂直方向上对齐 */

  align-items: flex-end;/* 容器成员垂直方向下对齐 */

 align-items: center; /* 容器成员垂直方居中对齐 */

/*
    注意： 
    使用该属性，需要配合高度设置为auto；
    才会有拉伸效果
*/
 align-items: stretch; 

---

4. align-content: The element used to control the wrapping stack

1. flex-start start point alignment

2. flex-end end point alignment

3. center center alignment

4. space-around Average distribution for each row

5. space-between justify both ends

6. stretch

---

5. align-self: (for sub-elements in a flex layout, override the align-items property of the flex box)

Make the lateral axis alignment of each member different.
Value :

1. flex-start: Control member's side axis alignment is top alignment

2. flex-end: The side axis alignment of the control member is bottom aligned

3. center: The lateral axis alignment of the control member is center alignment

4. stretch: The lateral axis alignment of the control member is stretched, and the height should be set to auto

As shown in the figure, the effect of the corresponding value can be obtained:

6. flex scaling ratio

flex: x (x is number)

flex: 2;

       When the members in the flex container are in the set flex ratio, the width and height of Chen Guan will be set according to the width of the parent box.

       However, when some of the container members do not have a scaling ratio set, they will be displayed according to their original width, and the remaining length of the parent box will be scaled to members with scaling ratios.

1. The case where the container members have set the scaling ratio

1. Some members do not set the scaling ratio

---

7. flex-wrap: Controls whether the elements in the flex box wrap or not

1. nowrap——No line wrapping (default)
   In the case of no line wrapping, when the total width of the member exceeds the width of the container, the width of the member will change

1. wrap————
   Wrap In the case of wrapping, when the total width of the member exceeds the width of the container, it will wrap automatically without affecting the width of the member

8. order: Used to control the order of the child elements of the telescopic layout box

order: number; (cannot be negative)
1. number is a non-negative integer and defaults to 0
2. The larger the number, the later