CSS3（伸缩盒模型简介、容器与项目、主轴、侧轴对齐，利用伸缩盒模型实现元素的水平垂直居中、伸缩性、项目排序与对齐、calc()）

视频教程： 184_CSS3_伸缩盒模型_简介

1. 伸缩盒模型简介

伸缩盒模型在移动端使用十分广泛

伸缩盒模型（Flexbox）是CSS3中的一种新的布局模式，旨在提供一种更高效的方式来布局、对齐和分配容器中的空间，即使容器的大小是未知或动态的。Flexbox主要适用于一维布局，即它可以在一个方向上（水平或垂直）对齐和分布空间

1.1 伸缩盒模型的主要特点

1. 灵活性：Flexbox允许容器内的项目灵活地改变大小，以适应不同屏幕尺寸和设备
2. 对齐方式：提供了强大的对齐能力，可以轻松地实现居中、对齐和分布空间
3. 方向控制：可以轻松地改变项目的排列方向，从水平变为垂直，或反之
4. 空间分配：可以自动分配容器内的剩余空间，使布局更加均匀和美观

1.2 伸缩盒模型的核心概念

• Flex容器（Flex Container）：通过设置display: flex;或display: inline-flex;将一个元素变为Flex容器
• Flex项目（Flex Item）：Flex容器内的直接子元素称为Flex项目
• 主轴（Main Axis）：Flex项目默认沿水平方向排列，这个方向称为主轴
• 交叉轴（Cross Axis）：与主轴垂直的方向称为交叉轴

1.3 伸缩盒模型的兼容性

截止目前，除了在部分 IE 浏览器不支持，其他浏览器均已全部支持

https://caniuse.com/?search=flex

2. 容器与项目

2.1 容器（Flex Container）

通过设置display: flex;或display: inline-flex;将一个元素变为Flex容器（display: inline-flex;很少使用，因为可以将多个伸缩容器的父容器也设置为伸缩容器）

---

容器的特点：

• 默认情况下，Flex容器的主轴是水平方向，交叉轴是垂直方向
• Flex容器内的直接子元素自动成为Flex项目
• Flex容器可以控制其内部Flex项目的布局、对齐和空间分配

2.2 项目（Flex Item）

• 仅伸缩容器的子元素成为了伸缩项目，孙子元素、重孙子元素等后代，不是伸缩项目
• 无论原来是哪种元素(块、行内块、行内)，一旦成为了伸缩项目，全都会块状化

Flex容器内的直接子元素称为Flex项目

项目的特点：

• Flex项目可以灵活地改变大小，以适应不同屏幕尺寸和设备
• Flex项目可以独立地设置对齐方式、顺序和空间分配

3. 主轴（flex-direction）

3.1 主轴方向（flex-direction）

在CSS3的伸缩盒模型（Flexbox）中，主轴是Flex容器中Flex项目主要排列的方向。主轴方向可以通过flex-direction属性来定义

---

flex-direction属性有以下几个可选值：

1. row（默认值）：
   • 主轴为水平方向，从左到右排列
   • 这是Flexbox的默认主轴方向
2. row-reverse：
   • 主轴为水平方向，但排列顺序与row相反，从右到左排列
3. column：
   • 主轴为垂直方向，从上到下排列
4. column-reverse：
   • 主轴为垂直方向，但排列顺序与column相反，从下到上排列

3.2 主轴的换行方式（flex-wrap）

在CSS3的伸缩盒模型（Flexbox）中，当Flex容器中的项目超出主轴的可用空间时，可以通过设置换行方式来决定如何处理这些溢出的项目。设置换行方式主要通过flex-wrap属性来实现，该属性有以下几个可选值：

1. nowrap（默认值）：不换行。所有Flex项目都会尝试适应主轴上的单行。如果空间不足，项目会根据flex-shrink属性进行收缩
2. wrap：换行。允许Flex项目在主轴上多行排列。如果当前行空间不足，项目会自动移到下一行
3. wrap-reverse：反向换行。与wrap类似，也是多行排列，但行的顺序是反向的，即新行会出现在上一行的上方（对于水平主轴）或左侧（对于垂直主轴）

3.3 flex-flow（了解即可）

flex-flow 是 CSS3 伸缩盒模型（Flexbox）中的一个简写属性，它结合了 flex-direction（主轴方向）和 flex-wrap（换行方式）两个属性。使用 flex-flow 可以更简洁地同时定义这两个属性的值

flex-flow: <flex-direction> || <flex-wrap>;

3.4 主轴的对齐方式（justify-content）

在CSS3的伸缩盒模型（Flexbox）中，主轴的对齐方式由justify-content属性控制

justify-content: <value>;

可选值：

1. flex-start（默认值）：项目靠主轴的起始边对齐
2. flex-end：项目靠主轴的结束边对齐
3. center：项目在主轴上居中对齐
4. space-between：项目之间的间隔都相等，第一个项目靠主轴的起始边，最后一个项目靠主轴的结束边
5. space-around：项目之间的间隔都相等，且项目与容器边缘的间隔是项目之间间隔的一半
6. space-evenly：项目之间的间隔以及项目与容器边缘的间隔都相等

4. 侧轴对齐（align-items）

在CSS3的伸缩盒模型（Flexbox）中，侧轴的对齐方式可以根据容器的单行和多行布局进行不同的设置

4.1 单行情况下的侧轴对齐方式

在单行Flex容器中，我们使用align-items属性来控制项目在侧轴上的对齐方式。以下是align-items属性的常用值及其效果：

• stretch（默认值）：如果项目未设置高度或设置为auto，将占满整个容器的高度
• flex-start：项目靠侧轴的起始边对齐
• flex-end：项目靠侧轴的结束边对齐
• center：项目在侧轴上居中对齐
• baseline：项目根据它们的基线对齐

4.2 多行情况下的侧轴对齐方式

在多行Flex容器中，我们使用align-content属性来控制行与行之间的对齐方式。以下是align-content属性的常用值及其效果：

• stretch（默认值）：各行将占满整个容器的高度
• flex-start：各行靠侧轴的起始边对齐
• flex-end：各行靠侧轴的结束边对齐
• center：各行在侧轴上居中对齐
• space-between：各行之间留有相等的空间，首行和末行紧贴容器的边缘
• space-around：各行周围留有相等的空间，包括首行和末行

5. 利用伸缩盒模型实现元素的水平垂直居中

5.1 方式一：使用justify-content和align-items

这是最直接的方式，通过设置父容器的 justify-content 和 align-items 属性为 center，可以同时实现子元素在水平方向和垂直方向上的居中

.flex-container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

5.2 方式二：使用Flexbox的flex和margin属性

当子元素是块级元素时，可以只设置margin: auto;来自动居中

.container {
  display: flex;
}

.child {
  flex: 0 0 auto; /* 不放大也不缩小，保持原始尺寸 */
  margin: auto;   /* 水平和垂直居中 */
}

6. 伸缩项目在主轴上的基准长度（flex-basis）

在CSS3的伸缩盒模型（Flexbox）中，伸缩项目（flex item）在主轴上的基准长度是由flex-basis属性控制的。flex-basis属性定义了伸缩项目在主轴上的初始主尺寸，即在分配剩余空间之前伸缩项目的大小

---

flex-basis可以接受以下值：

1. 长度值：可以是一个固定的长度（如px、em、rem等）或者百分比。百分比是相对于伸缩容器的主尺寸而言的

   .flex-item {
     flex-basis: 200px; /* 固定长度 */
   }
   
   .flex-item {
     flex-basis: 50%; /* 相对于伸缩容器的百分比 */
   }
   

2. 关键字：auto是默认值，表示伸缩项目的基准长度是根据其自身内容的大小来决定

   .flex-item {
     flex-basis: auto; /* 默认值，根据内容大小 */
   }
   

7. 伸缩性

7.1 伸（flex-grow）

在CSS3的伸缩盒模型中，"伸"指的是伸缩项目在伸缩容器中有剩余空间时如何扩展以填充这些空间

flex-grow定义了伸缩项目在伸缩容器中分配剩余空间时的增长能力，它接受一个无单位数值，表示扩展的比例。例如，如果所有伸缩项目的flex-grow都设置为1，剩余空间将平均分配给所有项目。如果某个项目的flex-grow值较大，它将获得更多的剩余空间

.flex-item {
  flex-grow: 1; /* 默认值为1 */
}

工作原理：

• 当伸缩容器的大小超过其内所有伸缩项目的基准长度总和时，剩余空间会被按照各项目的flex-grow值进行分配
• 这使得伸缩项目能够根据需要扩展，以填满可用空间，从而实现灵活的布局设计

7.2 缩（flex-shrink）

"缩"指的是当伸缩容器空间不足时，伸缩项目如何收缩以适应容器的大小

flex-shrink定义了伸缩项目在伸缩容器空间不足时收缩的能力，它接受一个无单位数值，表示收缩的比例。如果所有伸缩项目的flex-shrink都设置为1，空间不足时它们将平均收缩。如果某个项目的flex-shrink值较小，它将收缩得较少

.flex-item {
  flex-shrink: 1; /* 默认值为1，即可以收缩 */
}

工作原理：

• 当伸缩容器的大小小于其内所有伸缩项目的基准长度总和时，空间不足的情况发生，伸缩项目将根据各自的flex-shrink值进行收缩
• 这确保了在空间有限的情况下，伸缩项目能够适应容器的大小，避免溢出或布局破坏

8. 伸缩盒模型的复合属性（flex）

在Flexbox布局中，flex 是一个复合属性，它可以同时设置 flex-grow、flex-shrink 和 flex-basis 三个子属性

• flex-grow：定义项目的放大比例，即如果存在剩余空间，项目应该放大的比例。默认值为 0，即如果有剩余空间，也不放大
• flex-shrink：定义项目的缩小比例，即如果空间不足，项目应该缩小的比例。默认值为 1，即空间不足时，项目将等比例缩小
• flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（main size）。它可以设为跟 width 或 height 属性一样的值（如 350px），默认值为 auto，即项目的本来大小

---

flex 属性可以按照以下格式来使用：

flex: <flex-grow> <flex-shrink> <flex-basis>;

常见简写形式：

• flex: auto：等同于 flex: 1 1 auto，表示伸缩项目可以自由增长和收缩，flex-basis 为自动大小
• flex: 1：等同于 flex: 1 1 0，表示伸缩项目可以等比例增长和收缩，flex-basis 为0
• flex: none：等同于 flex: 0 0 auto，表示伸缩项目既不增长也不收缩，flex-basis 为自动大小
• flex: 0 auto：等同于 flex: 0 1 auto，表示伸缩项目不增长但可以收缩，flex-basis 为自动大小。这也是 flex 的初始值

9. 项目排序与单独对齐

9.1 项目排序（order）

在Flexbox中，可以使用 order 属性来改变Flex项目的显示顺序。order 属性接受一个整数作为值，数值越小，项目的位置越靠前，默认值为 0

.flex-item:first-child {
  order: 2; /* 将第一个项目排序为第二个显示 */
}
.flex-item:last-child {
  order: -1; /* 将最后一个项目排序为第一个显示 */
}

在上面的示例中，第一个 .flex-item 将会被排序到第二个位置，而最后一个 .flex-item 将会被排序到最前面

9.2 单独对齐（align-self）

单独对齐允许您对Flex容器中的个别项目进行对齐，而不是影响所有项目。这可以通过 align-self 属性实现，它允许单个项目有与其他项目不同的对齐方式

.flex-item {
  align-self: auto; /* 默认值，继承父容器的 align-items 属性 */
}
.item-align-end {
  align-self: flex-end; /* 单独将项目对齐到侧轴的末端 */
}
.item-align-center {
  align-self: center; /* 单独将项目在侧轴上居中对齐 */
}

10. calc()

CSS中的calc()函数是一个非常强大且灵活的工具，它允许在声明CSS属性值时执行计算

10.1 calc()函数的基本概念和语法

使用calc()时，运算符前后必须保留空格，例如calc(100% - 20px)是正确的，而calc(100%-20px)则是错误的

calc()函数允许在指定CSS属性值时使用数学表达式进行计算。它可以用于任何需要<length>, <frequency>, <angle>, <time>, <percentage>, <number>, 或 <integer>值的场景。基本语法如下：

property: calc(expression);

这里的property是你要设置的CSS属性，而expression是一个包含加法（+）、减法（-）、乘法（*，通常只用于与var()结合使用）、除法（/）的数学表达式

10.2 calc()函数的常见使用场景

10.2.1 动态调整宽度

在响应式布局中，calc()可以灵活地处理固定值和百分比的组合，使元素在不同屏幕尺寸下保持合适的宽度。例如：

.container {
  width: calc(100% - 40px); /* 减去左右各20px的内边距 */
  padding: 20px;
}

10.2.2 创建自适应的内边距和外边距

calc()可以让你基于容器的宽度或高度动态计算内边距或外边距。例如：

.element {
  /* 上内边距为10%，右内边距为20px，下内边距为10%，左内边距为20px */
  padding: calc(10%) 20px calc(10%) 20px;
}

10.3 calc()函数的注意事项

• calc()中的运算符前后必须保留空格，否则会导致计算失败
• calc()可以嵌套使用，例如calc(calc(100% - 20px) / 2)
• 在使用calc()时，应确保表达式中的单位是兼容的，例如不能直接将长度单位与时间单位相加

10.4 兼容性

calc()函数在现代浏览器中得到了广泛的支持，包括Chrome, Firefox, Safari, Edge以及IE9及以上版本

11. 伸缩盒模型综合案例

视频教程：196_CSS3_伸缩盒模型_案例练习