flex布局

flex布局概念

在网页开发过程中，页面布局是不可或缺的，常用的布局方式有表格布局，DIV+CSS布局，以及我今天讲的flex布局。

flex布局也称为弹性布局，可以响应式地实现各种页面布局，当页面需要适应不同的屏幕大小以及设备类型时非常适用，在写小程序的项目中flex布局用得非常多，适应性也非常强，具有强大的伸缩性，任何一个容器都可以指定为 Flex 布局。

主要属性及使用

1.使用flex布局
块元素：display:flex
行内元素:dispaly: inline-flex
—设置后容器中的直系子元素就会变为 flex 元素
2.主轴和交叉轴：flex-direction（默认水平方向）
主轴方向是可以改变的，
row 从左到右
row-reverse 从右到左
column 从上到下
column-reverse 从下到上
3.对齐方式：
（1）justify-content—定义了子元素在主轴上的对齐方式
flex-start：默认值，从头部开始，如果主轴是x轴，则从左到右
flex-end：从尾部开始排列
center：在主轴居中对齐
space-between 两端对齐
space-around 两侧间距相等
space-evenly 间距相同
（2）align-item—定义了子元素在侧轴上的对齐方式
flex-start：在侧轴的头部开始排列
flex-end：在侧轴的尾部开始排列
center：居中对齐
stretch：如果父元素高度没有设置,或默认为auto,则占满整个容器高度
（3）align-content–定义了多行子元素在侧轴上的对齐方式
flex-start：在侧轴的头部开始排列
flex-end：在侧轴的尾部开始排列
center：居中对齐
space-between：在侧轴先分布在两头、再平分剩余空间
space-around 在侧轴平分剩余空间
stretch：如果父元素高度没有设置,或默认为auto,则占满整个容器高度
4.换行 flex-wrap
flex-wrap–规定flex容器是单行或者多行，同时横轴的方向决定了新行的方向
默认情况下，所有的子元素都是默认不换行的。当所有子元素的总宽度大于父元素的宽度的时候，子元素会均分父元素的宽度。
可选值:
nowrap 不换行
wrap 换行，换行之后默认存在间距
5.flex-flow属性
flex-direction + flex-wrap的复合写法

flex-diection: column;
flex-wrap: wrap;
/* 相当于 */
flex-flow: column wrap;