Flex 布局容器属性_给父元素设置display:flex后,可以使用flex的相关属性,例如通过flex-directi

dispaly: flex | inline-flex

将父元素设置为Flex布局容器，flex：容器对外表现为块元素；inline-flex：容器对外表现为行元素，对内两者无差

.container {
    display: flex | inline-flex;
}
<div class="container"></div>
1
2
3
4

设置在容器上的六种属性

1. 横向/纵向布局/设定主轴
   flex-direction: row | row-reverse | column | column-reverse;
   对应：横向起点在左侧（主轴为横向） | 横向起点在右侧 （主轴为横向）| 纵向起点在上（主轴为纵向） | 纵向起点在下（主轴为纵向）
   此时宽度或高度如果超出父元素，子元素会自动调节

2. 一行放不下时换行布局
   flex-wrap: nowrap | wrap | wrap-reverse;
   对应：不换行 | 换行，第一行在上面 | 换行，第一行在下面

3. flex-flow
   flex-direction 和 flex-wrap 的简写

4. 项目在主轴上的对齐方式
   justify-content: flex-start | flex-end | center | space-between | space-around;
   对应：与主轴起点对其 | 与主轴终点对其 | 居中 | 两端对齐，其余自适应 | 子元素两侧间隔相等
   主轴看flex-direction属性

 .container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        /* flex-flow:row wrap; */
        justify-content: center;
        width: 500px;
        height: 500px;
        background-color: aqua;
    }

    .item {
        width: 100px;
        height: 100px;
        background-color: darkblue;
        margin: 3px;
    }
<div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

5. 交叉轴上如何对齐（flex-direction定义主轴方向，与主轴方向垂直的为交叉轴）
   align-items: flex-start | flex-end | center | baseline | stretch;
   对应：与交叉轴的起点对齐 | 与交叉轴的终点对齐 | 居中对齐 | 项目第一行文字的基线对齐 | 如果项目未设置高度或者为 auto，项目将占满整个容器的高度（默认值）。
6. 多根轴线的对齐方式，项目排列只有一行时，该属性不起作用，需设置flex-flow属性
   align-content : flex-start | flex-end | center | space-between | space-around | stretch;
   对应： 与交叉轴的起点对齐 | 与交叉轴的终点对齐 | 居中对齐 | 与交叉轴两端对齐，其余自适应 | 子元素两侧间隔相等 | 如果项目未设置高度或者为 auto，项目将占满整个容器的高度（默认值）。