Flex Box 概念疏理

Flex Box，全称 Flexible Box，中文名“弹性盒子模型”，是一种布局模型，用于为页面元素提供更强大的布局能力，可以轻松实现一些复杂的布局效果。

Flex 容器

Flex 容器是采用 Flex 布局的元素，它是 Flex 布局中的父元素，负责管理其子元素的布局。Flex 容器可以通过 display: flex; 声明来创建。Flex 容器具有以下特点：

• 可以包含一个或多个子元素
• 子元素在 Flex 容器中排列成一行或一列
• 可以设置 Flex 容器的布局方向、子元素的对齐方式以及子元素的顺序

Flex 项目

Flex 项目是 Flex 容器中的子元素，它可以是任何 HTML 元素。Flex 项目具有以下特点：

• 可以设置 Flex 项目的宽高、边距、内边距和背景色等样式
• 可以设置 Flex 项目的顺序、对齐方式和自由空间分配方式
• 可以设置 Flex 项目的定位方式

布局方向

Flex 容器的布局方向可以是水平方向或垂直方向。通过 flex-direction 属性来设置。

• row ：水平方向排列
• row-reverse ：水平方向排列，子元素顺序相反
• column ：垂直方向排列
• column-reverse ：垂直方向排列，子元素顺序相反

主轴与交叉轴

在 Flex 布局中，存在主轴和交叉轴的概念。

• 主轴 ：子元素排列的方向，可以是水平方向或垂直方向
• 交叉轴 ：垂直于主轴的方向，子元素在其上排列

位置

Flex 项目在主轴上的位置可以通过 justify-content 属性来设置。

• flex-start ：子元素在主轴的起始位置排列
• flex-end ：子元素在主轴的末尾位置排列
• center ：子元素在主轴的中心位置排列
• space-between ：子元素在主轴上均匀分布，最后一个子元素除外
• space-around ：子元素在主轴上均匀分布，包括第一个和最后一个子元素

轴对齐

Flex 项目在交叉轴上的对齐方式可以通过 align-items 属性来设置。

• flex-start ：子元素在交叉轴的起始位置排列
• flex-end ：子元素在交叉轴的末尾位置排列
• center ：子元素在交叉轴的中心位置排列
• stretch ：子元素在交叉轴上拉伸，以填充整个容器

顺序排列

Flex 项目在 Flex 容器中的顺序可以通过 order 属性来设置。order 属性的值是一个整数，数字越小，顺序越靠前。

自由空间分配

Flex 项目在主轴上剩余的空间可以通过 flex-grow 、flex-shrink 和 flex-basis 属性来分配。

• flex-grow ：子元素在主轴上剩余空间的分配比例。数字越大，分配的剩余空间越多。
• flex-shrink ：子元素在主轴上缩小的比例。数字越大，缩小的比例越大。
• flex-basis ：子元素在主轴上的初始大小。

定位

Flex 项目可以通过 position 属性来定位。

• static ：默认值。子元素按照正常的流布局排列。
• absolute ：子元素脱离正常的流布局，根据其相对于父元素的位置进行定位。
• fixed ：子元素脱离正常的流布局，根据其相对于视口的