flex布局

什么是弹性布局（flex布局）

flex box是flexible的缩写，他是css3新引入的布局方式

• table布局（已经废弃）
• div+css3（float+定位）
• flex box（弹性盒子）

创建flex布局

如果我们想创建flex布局，只需要给父元素设置display：flex，使其子元素进行弹性布局，其中子元素变为类似line-block的状态，块级元素的默认width：100%会失效，float，clear，vertical-align也会失效

• 给父元素设置display：flex，子元素的一个宽度时由内容撑开。、高度是父元素的高度

容器上的属性

• flex-direction（row默认、column、row-reverse、column-reverse）
• 给父元素设置display：flex，子元素的宽度是由内容撑开，高度是由父元素的高度，如果设置了flex-direction：column；子元素的高度是父元素的宽度，高度是由内容决定。

主轴和交叉轴

• 主轴与交叉轴并不固定，他是有flex-dirction的排列方向决定，也就是当方向是row时，x轴为主轴，y轴为交叉轴，当方向为column的时候，y轴为主轴，x轴为交叉轴
• 主轴方向的对齐方式（flex-start/flex-end/center/space-between/space-around）
• 交叉轴（align-items）定义交叉轴：值为：flex-start/flex-end/center
• • /* 默认nowrap不折行，子元素的宽度会按比例压缩到这个父元素容器里一行显示，不会溢出容器外部。wrap是显示折行 */flex-wrap: wrap;
• align-content属性是定义多根轴线的对齐方式，如果只有一根轴线该属性不起作用

 display: flex;
            /* 默认是row（横向排列）
            column是纵向 */
            flex-direction: row;
            flex-wrap: wrap;

            /* 默认值 */
            align-content: stretch;
            /* 交叉轴的中点对齐 */
            align-content: center;
            /* 交叉轴的起点对齐 */
            align-content: flex-start;
            /* 交叉轴的终点对齐 */
            align-content: flex-end;
            /* 交叉轴的两端对齐 */
            align-content: space-between;
            /* 交叉轴的平均对齐 */
            align-content: space-around;