Flex弹性布局——属性总结（一）

前言

最近小程序的势头渐渐变猛，一方面有微信逐渐完善的生态社区，另一方面又有百度、阿里甚至头条都开始构建自己的小程序生态。在移动端的兼容需求越来越多，那么提高开发效率自然也就成了前端的需求，Flex布局是个好东西。

一、Flex与传统盒子的对比

传统布局的核心是盒子模型，依赖 display 属性 + position 属性 + float 属性。可以看出来传统布局非常容易实现像 word 左对齐，右对齐这样的功能，可以说，传统布局更适合于文字排版。

但是，对于垂直居中这样一些布局，以及响应式开发，虽说可以实现，但是却不够效率。使用Flex布局则有这些优势：

• 免去了很多计算。在布局中Flex大量运用了比例的关系去映射元素的位置；
• flex 对响应式布局的支持更好，很多时候屏幕尺寸的改变幅度大，用传统布局去更改需要计算大量坐标像素；
• flex 支持行内元素。

二、Flex概念介绍

1、弹性盒子模型：

要灵活运用flex提供的便利，首先需要了解的是它盒子中贯彻的概念：

• 主轴（main axis）
• 交叉轴（cross axis）

如图：

Flex中的所有属性都基于这两条轴产生作用。

三、Flex的使用

使用Flex弹性盒子的方法很简单，就是在元素的样式中加入display:flex，那么该元素包含的子元素都将对Flex的容器属性产生作用。
这里又需要区分一个概念，Flex是有容器属性和子元素属性的，所谓容器属性，就是只能在父容器（父元素）中设置样式，对所有子元素产生效果的属性，而子元素属性，则是在已经设置了display:flex的父元素下的子元素，自身可以设置的属性。

（一）容器属性

1、flex-direction

定义子元素在主轴（mian axis）的排列方向

div{
	display:flex;
	/*共有四个参数*/
	flex-direction:row;（横向排列，从左到右按顺序）
	flex-direction:row-reverse;(横向排列，从右到左)
	flex-direction:column;（纵向排列，从上到下）
	flex-direction:column-reverse;(纵向排列，从下到上)
}

2、flex-wrap

定义元素是否换行

div{
	display:flex;
	/*共有四个参数*/
	flex-wrap:nowrap;（默认值,不换行，且元素的宽度设置无效)
	flex-wrap:wrap;(宽度不够自动换行，且是正序)
	flex-wrap:wrap-reverse;(宽度不够自动换行，倒序)
}

3、justify-content

子元素在主轴（main axis）上的对齐方式

div{
	display:flex;
	/*共有五个参数 */
	justify-content:flex-start;(默认值，从主轴的开始位置开始排列)
	justify-content:flex-end;（从主轴的结束位置开始排列）
	justify-content:center;（居中）
	justify-content:space-around;（两端对齐，子元素之间的间隔都相等）
	justify-content:space-between;（两端贴紧边界，子元素之间的间隔都相等）
}

4、align-content

定义了多根主轴线内元素在交叉轴（cross axis）上的对齐方式。如果整个父容器内只有一行子元素，则该属性无效

div{
	display:flex;
	/*共有五个参数 */
	align-content:flex-start;(默认值，从交叉轴的开始位置开始排列)
	align-content:flex-end;（从交叉轴的结束位置开始排列）
	align-content:center;（与交叉轴的中点对齐）
	align-content:stretch;（拉伸铺满）
	align-content:space-around;（上下两端对齐，子元素之间的间隔都相等）
	align-content:space-between;（上下端贴紧边界，子元素之间的间隔都相等）
}

5、align-items

子元素在交叉轴（cross axis）上的对齐方式

div{
	display:flex;
	/*共有五个参数 */
	align-items:flex-start;(默认值，从交叉轴的开始位置开始排列)
	align-items:flex-end;（从交叉轴的结束位置开始排列）
	align-items:center;（与交叉轴的中点对齐）
	align-items:stretch;（拉伸铺满）
	align-items:baseline;（根据子元素的第一行文字基线对齐）
	
}

以上就是所有需要写在父容器上的Flex属性了，还有需要设置在子元素的属性估计会在下一篇总结继续补充。