学习flex及其使用场景

flex布局是什么？

Flex（Flexible Box Layout）是一种一维布局方式，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。

启用flex方法(通常用于给予父盒子该属性)

.parent {
  display: flex;
}

行内元素也可以使用Flex布局。

.box {
  display: inline-flex;
}

 Webkit内核的浏览器，必须加上-webkit前缀。
 Webkit内核主要浏览器有Apple Safari (桌面版 & iOS版)，历史版本或特定平台的浏览器（旧版本 Android ，现在大多转向了Blink），其他/小众浏览器

.box {
  display: -webkit-flex; /* Safari */
  display: flex;
}

注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

float：使元素向左/右浮动，实现文字环绕或并排列布局

clear：清除浮动，防止元素被浮动元素覆盖（被浮动覆盖的元素添加clear: both; ）

vertical-align：控制inline/表格单元格元素的垂直对齐（因为flex提供了更直接的对齐控制）

容器概念

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

注：当然这里的 <h3>flex container</h3> 标题我使用了绝对定位实现，因为在flex盒子中所有子元素成为Flex项目，这个时候就算我们使用<h3>标签，其也会和其他元素变成横向排布，宽度不再保持100%

如果不使用flex而采用传统布局则会是

容器属性

1.flex-direction：

决定 main axis主轴 的方向

取值：

• row（默认值）：主轴为水平方向，起点在左端。
• row-reverse：主轴为水平方向，起点在右端。
• column：主轴为垂直方向，起点在上沿。
• column-reverse：主轴为垂直方向，起点在下沿。

2.flex-wrap属性

一条轴线排不下，如何换行

取值：

• nowrap（默认值）：不换行（如果出现flex item总宽度超出flex container。1.父盒子有固定宽度，item会被限制在最大同行显示宽度  2.父盒子没有固定宽度，item会撑开父盒子直到其在一行显示完全）

1.父盒子宽度设定为了800px

2.父盒子宽度设定为100%，被撑开

• wrap（换行）：第一行在上方

• wrap-reverse（换行）：第一行在下方

3.flex-flow

flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

4.justify-content

定义了项目在主轴上的对齐方式，也是Element中的flex布局justify属性原理所在(这里直接引用Element中的图片)

 flex-start

 center

 flex-end

 space-between

space-between：两端对齐，项目之间的间隔都相等。

 space-around

space-around：每个项目两侧的间隔相等。项目之间的间隔比项目与边框的间隔大一倍。

5.align-items

定义项目在交叉轴上如何对齐（与justify-content一个性质只不过是参照于交叉轴）。

 stretch（默认值）：flex item未设置高度时就会占满整个容器高度。

 flex-start：交叉轴的起点对齐。

 flex-end：交叉轴的终点对齐。

 center：交叉轴的中点对齐。

 baseline: 项目的第一行文字的基线对齐。

6.align-content

多根轴线，也就是多行flex item的对齐方式（只存在一根轴线的时候该属性不起作用）

 flex-start：交叉轴的起点对齐。

 flex-end：交叉轴的终点对齐。

 center：交叉轴的中点对齐。

• baseline: 项目的第一行文字的基线对齐。
• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

项目的属性

1.order

项目的排列顺序。数值越小，排列越靠前，默认为0。

.item {
  order: 数字;
}

2. flex-grow

项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

可以理解为flex-item的所占比例，类似element中layout布局里的span='n'

3.flex-shrink

定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

所有项目的flex-shrink属性都为1（默认），当空间不足时，都将等比例缩小。

如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，为0的flex-item不缩小

这里也就解释为什么当我们设定flex-container固定宽度的时候，flex-item总长理应超过其最大宽度也会被限制在flex-container中。

4.flex-basis

定义了 flex 项目在分配剩余空间之前的初始大小。它的默认值为auto，即项目的本来大小。

取值：
<length>：  固定尺寸（如100px，5em）

auto（默认）: 如果设了width则使用width

                        未设置时由内容确定

 content：完全由内容确定忽视width

5.flex

flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

.item{
  flex: none; //等价于flex: 0 0 auto; 不扩展，不收缩，基础尺寸由内容决定
}

.item {
  flex: 0 1 auto  //默认值
}

6.align-self

允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

.special_one {
  align-self: flex-end;
}

(虽然有不少感觉是开发中很少会用到的，但通过写这篇文章系统性理解了flex，后续使用Element的layout布局也会通透不少)