一篇掌握Flex 布局方式及其所有属性

目录

传统盒模型

Flexbox 布局方式

Flexbox 核心概念

Flex 容器属性

• flex-direction ：项目元素排列的方向

• flex-wrap ：项目元素排列方式

• justify-content ： 项目在主轴上的对齐方式

• align-items ：项目在交叉轴上的对齐方式

• align-content ：多行项目的排列方式

Flex 项目属性

• order ：项目的排列顺序
• flex-grow ： 项目的放大比例

• flex-basis ：项目在主轴上的空间

• align-self ：项目的对齐方式

正文

---

• 传统盒模型 ：通过 display、float等参数来配置具体的布局，这种方式代码简单，但是在处理实现诸如垂直居中、弹性宽度和高度等特性时会极为麻烦。

• Flexbox 布局方式 ：可以快速的实现上述各种场景，以及更多非常常用的排版需求，例如：

  — 竖排元素
  — 元素左侧/右侧竖向对齐

Flexbox 核心概念

---

• 在进行Flexbox 布局时，核心的属性包括容器和项目：

— 容器 ： Flexbox 中外部的容器
— 项目 ： Flexbox 中内部的项目

通过设置容器的参数，来实现内部项目按一定的顺序来进行排布：

Flex 容器属性

---

• 通过设置 Flex 容器的属性，可以设置容器内各项目的样式

— flex-direction ：项目元素排列的方向

① 值为 row： 内部项目从左向右排列

② 值为 row-reverse ：内部项目反转横向排列

③ 值为 column ：内部项目纵向对齐

④ 值为 column-reverse ：内部项目反转纵向对齐

— flex-wrap ：项目元素排列方式
① 值为 nowrap ： 项目元素不会溢出，也不会自动换行

② 值为 wrap ： 当项目元素的宽度超出容器的时候，就会自动换行

③ 值为 wrap-reverse ：子元素溢出容器时会反转自动换行

— justify-content ： 项目在主轴上的对齐方式

① 值为 flex-start ：项目从主轴的开始位置对齐

② 值为 flex-end ： 项目从主轴的结束位置对齐

③ 值为 center ：项目从主轴的中间开始对齐

④ 值为 space-between ：各项目之间保持相同的距离进行排布

⑤ 值为 space-around ：不仅各项目间保持相同的距离，且在两侧也会有一定的距离来保持排列

— align-items ：项目在交叉轴上的对齐方式
① 值为 flex-start ：交叉轴的起点对齐

② 值为 flex-end：交叉轴的终点对齐

③ 值为 center ：交叉轴的中点对齐

④ 值为 baseline：当交叉轴与行内轴为同一条时，等价于 flex-start ；其他情况下以项目的第一行文字的基线对齐

⑤ 值为 stretch （默认值）：如果项目未设置高度或设置为auto，则沾满整个容器的高度。（同时收宽度和高度的限制）

— align-content ：多行项目的排列方式（定义多跟轴线的对齐方式，如果项目只有一根轴线，该属性不起作用）
① 值为 flex-start ：与交叉轴的起点对齐

② 值为 flex-end ：与交叉轴的终点对齐

③ 值为 center ：与交叉轴的中点对齐

④ 值为 space-between ：与交叉轴两端对齐，轴线之间的距离平均分布

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

⑥ 值为 stretch （默认值）：各行平均分配。轴线占满整个交叉轴（同时受宽度和高度的影响）

Flex 项目属性

---

• 通过设置 flex 项目属性，我们可以控制各项目自己的属性

— order ：项目的排列顺序 （值越小，排列越靠前，默认为0）

— flex-grow ： 项目的放大比例（默认为0，即如果有剩余空间，也不放大）

— flex-shrink ：项目的缩小比例 （默认为1，即如果空间不足，则项目将缩小）

如果所有的项目 flex-shrink 属性都为1，则空间不够时，都将等比例缩小。如果一个项目的 flex-shrink 属性为0，其他项目都为1，则空间不足时，前者不缩小。

— flex-basis ：项目在主轴上的空间 （默认为auto，即项目本来的大小），它可以设为跟 width 或 height 一样的
值，如 150px ，则项目将占据固定空间。

— align-self ：项目的对齐方式，通过设置此属性，可以让项目和其他项目有不同的排列方式，可覆盖 align-items 属性。默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch 。此属性有下图中的6个值可选择（除auto外，其他与align-items 可选值相同）。