前言：Flex布局能快速实现常见的几种网页布局，如九宫格类产品介绍页面，网站双飞翼布局，手机页面设计等。
关于Flex布局具体可参考阮一峰博客
1、网页布局
传统的网页布局通常基于盒状模型，通常是对display( inline-block 或 block等设置 ), position (父级relative, 子元素absolute ), float 及 clear-fix清除浮动等属性，负margin等设置来实现各种布局及居中等。
layout.png
2、Flex 布局
W3C 于2015年纳入标准的一种弹性布局模型，由弹性盒display: flex包裹内部的items。其于方向无关，布局方向由主轴，cross axis进行设置，可实现空间自动分配，自动对齐。
Flex.png
语法及属性设置：
Flex-syntax.png
a: Flex container属性设置
flex-direction：设置主轴的方向，即设置内部items的排列是按行还是按列进行排列，属性值为row, row-reverse(倒序), column, column-reverse。
flex-wrap: 设置根据宽度是否换行，属性值为nowrap 或 wrap.
flex-flow: 上述两个值的简写，默认为row nowrap
justify-content: 定义内部items在container内水平轴的位置，属性值为flex-start(左对齐)，flex-end(右对齐), center(左右居中), space-between(空白位于items之间), space-around(空白环绕于items，类比word的文字环绕)
align-items: 定义内部items在container内垂直轴的位置，属性值为flex-start(顶部对齐)，flex-end(底部对齐), center(垂直居中),
b：Flex items属性设置
flex-grow: 增长比例，设置不同items占据的空白空间份额，数字
flex-shrink: 收缩比例，设置不同items收缩的比例。
flex-basis: 设置items默认占据的大小。
flex: 上面三个值的集合
order: 根据数字来设置不同items的排序顺序
3. 产品介绍 & 网站 & 手机页面布局代码实现
产品介绍
flex-3.png
网站
flex-1.png
手机页面
flex-2.png
网友评论