Flex布局-产品介绍 & 网站 & 手机页面

前言：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