Flex

2009年，W3C提出了一种新的布局方式：Flex布局。

使用Flex布局可以简便，完整，响应式地实现各种页面布局，目前得到了大部分现代浏览器的支持。

 

一，基本概念：

 

采用Flex布局的元素，称为Flex容器（flex container），所有Flex容器子元素自动成为Flex容器成员，也可以称作Flex项目（flex item）。

 

下面是结构示意图：

 

从上图可以看到Flex容器有两条轴，分别是水平方向主轴（main axis）和垂直方向交叉轴（cross axis）。

main start | main end：主轴开始|结束位置

cross start | cross end：交叉轴开始|结束位置

main size | cross size：单个Flex子元素占据主轴/交叉轴空间

 

二，Flex容器

 

在Flex容器上有6个属性，分别是：

 

1，flex-direction：row（默认） |  row-reverse | column | column-reverse

设置Flex容器主轴的方向，有四个值：

 

row（默认）：主轴水平方向，从左到右

 

 

row-reverse：主轴水平方向，从右到左

 
 

column：主轴垂直方向，从上到下

 
 

column-reverse：主轴垂直方向，从下到上

 
 

2，flex-wrap：no-wrap（默认）| wrap | wrap-reverse

设置Flex容器子元素的换行情况，

no-wrap（默认）：不换行

默认情况下图片排成一行或者一列，假如Flex容器主轴方向是水平方向，修改修改图片宽度。

 

 wrap：换行，上对齐

 wrap-reverse：换行，镜像，下对齐

 

3，flex-flow：row no-wrap；

flex-flow是flew-direction和flex-wrap的缩写，默认值是row no-wrap；

 

4，justify-content：start | end | flex-start（默认） | flex-end | center | left | right | space-between | space-around | space-evenly | stretch | safe | unsafe | baseline | first-baseline | last baseline

定义Flex子元素在主轴上的对齐方式。

 

flex-start：左对齐

 

flex-end：右对齐

 center：局长对齐

 

space-between：两端对齐

 

sapce-around：这种对齐方式的效果是元素之间的距离是距离边界的距离的2倍。

 

5，align-items：flex-start | flex-end | center | baseline | stretch（默认值）

定义flex项目在交叉轴上的对齐方式

 

flex-start:：起点对齐

 

flex-end：终点对齐

 
 center：中点对齐

 

baseline：对齐第一个flex元素里面的文字

 

6，align-content：flex-startt | flex-end | center | space-between | space-around | stretch（默认）

定义多根轴线的对齐方式，适用于多行或者多列的flex布局，如果只有一行或者一列则改属性不起作用，所以必须把flex-wrap设置为wrap。

还是以主轴在水平方向为例，先把flex子元素设置为多行。

 

flex-start：起点对齐

 
 

flex-end：终点对齐

 
 

center：中点对齐

 
 

space-between：与交叉轴的两端对齐

 
 

spce-around：每根轴线之间的距离为为轴线到两端距离的两倍

 
 

 三，Flex子元素

 

Flex子元素上也有6个属性，分别是：

 

1，order：默认0

定义flex子元素的排列顺序，数值越小排列越靠前

 

2，flex-grow：默认0

定义项目的放大比例。

 如下图设置四个flex子元素的宽度分别为flex-grow：1，2，3，4

 

3，flex-shrink：默认值1，必须是非负整数。

定义项目的缩小比例，和flex-grow属性意义相反。

如果值为0则对于的flex子元素不会缩小。

 

4，flex-basis：auto（默认）

定义在分配多余空间之前，项目占据的主轴空间。如果空间不足则默认情况下项目也会缩小。

 

5，flex

flex是flex-grow，flex-shrink，flex-basis的简写

 

6，align-self：auto（默认，继承父元素） | flex-start | flex-end | center | baseline | stretch

可以设置单个flex子元素的对齐方式，改属性会覆盖flex容器上的align-items属性。

 

 参考：https://mp.weixin.qq.com/s/NnIL0SBsVLJI6lJDJMKewA