flex布局知识点

1.1 Flex 布局是什么？

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为 Flex 布局，采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

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

• flex： 将对象作为弹性伸缩盒显示，没有为父元素设置宽度，默认为100%。

• inline-flex：将对象作为内联块级弹性伸缩盒显示，父元素默认会根据子元素的宽高去自适应。

注意：flex 布局的子元素不会脱离文档流，flex 布局不支持 IE9 及以下的版本；IE10及以上也只是部分支持。

1.2 容器的属性

以下6个属性设置在容器上。

• flex-direction

• flex-wrap

• flex-flow

• justify-content

• align-items

• align-content

其中：

（1）flex-direction 属性决定主轴的方向（即项目的排列方向）。

有4个值。

• row（默认值）：主轴为水平方向，起点在左端。

• row-reverse：主轴为水平方向，起点在右端。

• column：主轴为垂直方向，起点在上沿。

• column-reverse：主轴为垂直方向，起点在下沿。

（2）flex-wrap

默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

可取三个值。

nowrap（默认）：不换行。

wrap：换行，第一行在上方。

rap-reverse：换行，第一行在下方。

（3）flex-flow

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

（4） justify-content

justify-content 属性定义了项目在主轴上的对齐方式。

可取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

• flex-start（默认值）：左对齐

• flex-end：右对齐

• center： 居中

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

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

• space-evenly：每个项目两侧的间隔相等，项目之间间隔比项目与边框的间隔相等

（5） align-items

align-items属性定义项目在交叉轴上如何对齐。

可取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。

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

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

• center：交叉轴的中点对齐。

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

• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

（6）align-content

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

该属性可能取6个值。

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

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

• center：与交叉轴的中点对齐。

• space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

• space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

• space-evenly：元素间距离平均分配

• stretch（默认值）：轴线占满整个交叉轴。

1.3 弹性元素

放在容器盒子中的元素即为弹性元素。

• float、clear 和 vertical-align 属性将失效

• 弹性元素均为块元素

• 绝对定位的弹性元素不参与弹性布局

（1）align-self

用于控制单个元素在交叉轴上的排列方式。

align-items 用于控制容器中所有元素的排列，而 align-self 用于控制一个弹性元素的交叉轴排列， 能够覆盖容器的 align-items 属性。

可取4个值。

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

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

• center：交叉轴的中点对齐。

• stretch（默认值）：将空间平均分配给元素。

(2) flex-grow

控制剩余空间是否放大，默认0，即如果存在剩余空间，也不放大。适合不确定文字数量自适应宽度。剩余空间就是父容器在主轴的方向上还有多少可用的空间。

注意：如果元素不是弹性盒对象的元素，则 flex-grow 属性不起作用。 如果弹性元素设置了宽度，将把（弹性盒子 - 弹性元素宽度和）后按照 flex-grow 进行分配 。

(3) flex-shrink

控制空间不够的时候是否缩小，默认 1，即如果空间不够则缩小，可以正常展示全该展示的东西，比如 icon、图片等，如果设为 0，则会出现超出截断的问题。

注意：如果元素不是弹性盒对象的元素，则 flex-shrink 属性不起作用。负值对该属性无效。

(4) flex-basis

• 定义了在分配多余空间之前，弹性元素占据的主轴空间（main size）。

• 浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即弹性元素的本来大小。

• 属性值的作用也就是width的替代品。

取值：

• 长度单位

• 百分比

flex-basis 的优先级高于 width、height 属性。 优先级 flex-basis 优先级大于 width、height。主轴方向。

注意：flex-basis 和 width 为 auto 值，那最后的空间就是根据内容多少来定的，内容多占据的水平空间就多。

弹性元素取值优先级高到低：

• max-width、max-height、min-width、min-height

• flex-basis

• width、height

• 内容本身的size

1.4  flex

flex 是 flex-grow、flex-shrink 、flex-basis 综合写法。

语法：

• flex:flex-grow flex-shrink flex-basis;

• flex:0 1 auto;(默认值)

• 后两个属性可选

注意：

• 一个值

  • 一个无单位的值会被认为 flex-grow 的值

  • 一个有效单位的宽度值，会被认为 flex-basis

• 两个值

  • 第一个值必须是：无单位数，认为是 flex-grow

  • 第二个值必须是：一个无单位数：认为是 flex-shrink；一个有效单位宽度：认为是 flex-basis

• 三个值

  • 第一个值必须是无单位数，认为是 flex-grow

  • 第二个值必须是无单位数，认为是 flex-shrink

  • 第三个值必须是有效单位宽度，认为是 flex-basis