flex弹性布局

flex布局又称弹性布局
1. 给父容器添加display: flex/inline-flex;属性，即可使容器内容采用弹性布局显示，而不遵循常规文档流的显示方式；在item里面使用的任何布局都会失效

 1 <template>
 2     <div>
 3         <div class="box">
 4             <div class="item">1</div>
 5             <div class="item">2</div>
 6             <div class="item">3</div>
 7             <div class="item">4</div>
 8         </div>
 9     </div>
10 </template>
11 
12 <script>
13 </script>
14 
15 <style>
16     .box{
17         width: 500px;
18         height: 500px;
19         background-color: pink;
20         margin: 100px auto;
21         /* 采用 flex 布局*/
22         display: flex;
23         /* 设置主轴的方向 */
24         flex-direction: row; /* （默认） 主轴为水平方向，起点在左端 */
25         /* flex-direction: row-reverse; /* 主轴为水平方向，起点在右端 */ 
26          /* flex-direction: column; /* 主轴为垂直方向 ，起点在上方 */
27         /* flex-direction: column-reverse; /* 主轴为垂直方向 ，起点在下方*/ 
28         
29         /* 是否换行  如何换行 */
30         /* flex-wrap: nowrap; /* 不换行 当容器的宽度不够时  每个item 会被挤压宽度 */
31         flex-wrap: wrap; /* 换行 默认*/
32         
33         /* item 的对齐方式 */
34         /* justify-content: flex-start; /* 项目位于主轴起点 */ 
35         /* justify-content: flex-end; /* item位于主轴终点*/ 
36         justify-content: center; /* item 居中 
37         /* justify-content: space-between; /*两端对齐，item之间的间隔都相等。(开头和最后的项目，与父容器边缘没有间隔) */ 
38         /* justify-content: space-around; /*每个item两侧的间隔相等*/
39         
40         /* align-items: flex-start;  /* 交叉轴的起点对齐  默认*/
41         /* align-items: flex-end;  /* 交叉轴的终点对齐*/
42         align-items: center; /* 交叉轴的中点对齐 
43         /* align-items: baseline; /* 以第一行文字的基线对齐*/ 
44         /* align-items: stretch; /* 默认值   如果item未设置高度设为auto 将占满整个容器*/ 
45         
46         
47     }
48     .item{
49         width: 100px;
50         height: 100px;
51         background-color: aqua;
52         font-size: 30px;
53         text-align: center;
54         line-height: 100px;
55         border: 1px solid #000;
56     }
57 </style>