CSS弹性盒子

一、弹性盒子

弹性盒子是 CSS3 的一种新的布局模式。
引入弹性盒布局模型的目的：是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分 配空白空间
兼容性： IE11+及标准浏览器最新版是支持的

1、设置弹性盒子
任何容器都可以指定为一个弹性盒子
display: flex;
display: inline-flex;
以上两条属性需要加给容器
以上两条属性需要加给容器
注意：
弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局
设为Flex布局以后，子元素的float、clear和vertical-align属性将失效 行级元素也可以设为弹性盒子

2、基本概念
容器：设置flex布局的盒子，叫做容器（flex container） 项目：容器中的直接子元素就是项目（flex item）
主轴：默认是水平方向的，从左到右的
交叉轴：默认是垂直方向的，从上到下的

3、容器属性
（1）flex-direction属性
决定主轴的方向
row（默认值）：主轴为水平方向，起点在左端 row-reverse：主轴为水平方向，起点在右端 column：主轴为垂直方向，起点在上沿 column-reverse：主轴为垂直方向，起点在下沿
（2）justify-content 属性
定义了项目在主轴上的对齐方式
flex-start（默认值）：左对齐 flex-end：右对齐 center： 居中 space-between：两端对齐，项目之间的间隔都相等 space-around：每个项目两侧的间隔相等
（3）align-items属性
定义项目在交叉轴上如何对齐
flex-start：交叉轴的起点对齐 flex-end：交叉轴的终点对齐 center： 交叉轴的中点对齐 baseline: 项目的第一行文字的基线对齐 stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度
（4）flex-wrap属性
如果一条轴线排不下，如何换行
nowrap（默认）：不换行 wrap：换行，第一行在上方 wrap-reverse：换行，第一行在下方