WEB移动端开发之flex布局

1、flex布局原理

2、flex布局父项常见属性

3、align-content设置侧轴上的子元素的排列方式（多行）

---

1，flex是flexible Box的缩写，意为弹性布局，任何一个容器都可以指定为flex布局。当我们为父盒子设为flex布局以后，子元素的float、clear、vertical—align属性将失效。伸缩布局=弹性布局=伸缩盒布局=弹性盒布局flex布局。

2，一定要先给父元素添加display：flex

flex-direction：设置主轴的方向

justify-content：设置主轴上子元素的排列方式

flex-wrap：设置子元素是否换行

align-content：设置侧轴上的子元素排列方式（多行）

align-items：设置侧轴上子元素的排列方式（单行）

flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap

3，align-content-设置侧轴上的子元素的排列方式(多行)
设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况(多行),在单行下是没有效果的
属性值及说明
flex-start
默认值在侧轴的头部开始排列
flex-end
在侧轴的尾部开始排列
center
在侧轴中间显示
space-around
子项在侧轴平分剩余空间
space-between
子项在侧轴先分布在两头,再平分剩余空间
stretch
设置子项元素高度平分父元素高度