移动端开发之flex弹性布局

flex布局概述

flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以 指定为 flex 布局。

1. 当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。

2. 伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 =flex布局

flex弹性布局优点

1.操作方便，布局极为简单，移动端应用很广泛

2.PC 端浏览器支持情况较差

3.IE 11或更低版本，不支持或仅部分支持

常见属性

flex-direction：设置主轴的方向

 

justify-content：设置主轴上的子元素排列方式{1.center 在主轴居中对齐（如果主轴是x轴则 水平居中）2.space-around 平分剩余空间）3.space-between 先两边贴边 再平分剩余空间}

 

flex-wrap：设置子元素是否换行{1.wrap 换行2.nowrap不换行}

align-content：设置侧轴上的子元素的排列方式（多行）{1.flex-start 从上到下    2.flex-end 从下到上    3.center 挤在一起居中（垂直居中）  4.stretch 拉伸 （默认值）}

 

align-items：设置侧轴上的子元素排列方式（单行）{1.flex-start 默认值在侧轴的头部开始排列 2.flex-end 在侧轴的尾部开始排列   3.center 在侧轴中间显示    4.space-around 子项在侧轴平分剩余空间    5.space-between 子项在侧轴先分布在两头，再平分剩余空间     6.stretch 设置子项元素高度平分父元素高度}

 

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

 

align-content 和 align-items 区别

1、align-items 适用于单行情况下， 只有上对齐、下对齐、居中和 拉伸

2、align-content 适应于换行（多行）的情况下（单行情况下无效）， 可以设置 上对齐、 下对齐、居中、拉伸以及平均分 配剩余空间等属性值。