弹性布局

c3中绝对最常用的布局 : 弹性布局

display : flex; flex-direction: // 修改主轴方向 row（默认值） 主轴为水平方向，起点在左端。 row-reverse 主轴为水平方向，起点在右端。 column 主轴为垂直方向，起点在上沿。 column-reverse 主轴为垂直方向，起点在下沿 justify-content: // 设置子元素在主轴方向的对齐方式 flex-start 默认值，代表在主轴方向的起点对齐 flex-end 在主轴方向终点对齐 center 在主轴居中 space-around 两边有间距，元素和元素之间也有间距 space-between 两边没有间距，元素和元素之间有间距 space-evenly 元素与元素之间有间距,间距是相等的 align-items： // 设置子元素在副轴方向的对齐方式 flex-start 在副轴起点对齐，如果没给副轴大小，内容撑开 center 在副轴中间 flex-end 在副轴终点 stretch 默认值，在副轴起点对齐，如果没给副轴大小，铺满父元素的副轴方向 如果给了副轴方向大小，flex-start和stretch没区别 flex-wrap:wrap; // 允许换行 // 子元素上设置 flex：设置占比 align-self： 取值跟align-items是一样的