定义一个弹性盒子：display:flex;默认程度排列
从左侧进行行排列：flex-direction:row;
从右向左进行排列：flex-direction:row-reverse;
从上到下排列：flex-direction:column;
从下到上排列：flex-direction:column-reverse;
当元素块的宽度大于盒子的宽度，元素块会主动压缩
当退出flex-wrap:wrap;时，会折行
同样的，应用flex-wrap:wrap-reverse;进行反向折行
能够应用flex-flow:进行同时设置
例如：flex-flow:column wrap-reverse等
主轴：justify-content
- 主轴的开始：
justify-content:flex-start; - 主轴的完结对齐：
justify-content:flex-end; - 主轴居中：
justify-content:center; - 均匀散布：
justify-content:space-between;(两边对齐) - 均匀散布：
justify-content:space-around;(元素左右两边都有间距) - 齐全均匀散布：
justify-content:space-evenly;(齐全等分)
(要依据排列方向flex-direction决定)
穿插轴：align-items
- 穿插轴开始：
align-items：flex-start; - 穿插轴完结：
align-items：flex-end; - 穿插轴居中：
align-items:center; - 拉撑：
align-items:stretch;
残余空间平均分配，占一等份：flex-grow:1;
不进行调配：flex-grow:0;
<style> *{ padding: 0; margin: 0; } body{ height: 100vh; display: flex; /*设置弹性盒子*/ flex-direction: column;/*按列进行排列*/ justify-content: space-between;/*设置主轴对齐形式*/ } header{ height: 60px; background: blueviolet; } main{ flex-grow: 1;/*将残余空间撑满*/ background: #cccccc; } footer{ height: 60px; background: #383881; } </style>- 放大：
flex-grow:1; - 放大：
flex-shrink:2; - 基准尺寸：
flex-basis:100px;
能够写在一起：flex:1 2 100px;