基础 CSS Flexbox 模式介绍

Flexbox 是 CSS 中的一种布局模式，它使得容器里的元素能根据不同的尺寸自动地调整布局，以适应不同的设备和屏幕尺寸。本文将介绍 Flexbox 的基础使用方法，包括如何定义一个 Flexbox 容器、如何定义 Flexbox 子元素的位置和大小、以及如何控制它们的排列方向和间距。

定义 Flexbox 容器

要定义一个 Flexbox 容器，只需将容器的 display 属性设置为 flex 或 inline-flex。例如：

.container {
  display: flex;
  /* 或者：display: inline-flex; */
}

由于 flex 和 inline-flex 的区别只是容器的外部尺寸和布局模式，因此它们都具有相同的属性和值。

定义 Flexbox 子元素的位置和大小

在 Flexbox 中，子元素的位置和大小可以通过以下属性进行控制：

• flex-grow: 确定子元素在可用空间内的分配比例。默认值为 0，表示不增加大小。设置为一个正整数，将会分配更多空间。
• flex-shrink: 确定子元素在空间不足时的压缩比例。默认值为 1，表示强制等比例缩小。设置为 0，将不会压缩。
• flex-basis: 指定子元素的初始大小。默认值为 auto，表示根据元素的内容自适应大小。
• align-self: 可以覆盖容器的 align-items 属性，对单个子元素进行对齐。

例如，以下代码将创建一个 Flexbox 容器，并设置其两个子元素的 flex-grow 属性和 flex-basis 属性：

.container {
  display: flex;
}

.item1 {
  flex-grow: 1; /* 充满容器的所有可用空间 */
  flex-basis: 0; /* 重置子元素的初始宽度 */
}

.item2 {
  flex-grow: 2; /* 比 item1 成比例放大一倍 */
  flex-basis: 0;
}

控制子元素的排列方向和间距

在 Flexbox 中，可以通过以下属性对子元素进行排列：

• flex-direction: 确定子元素的排列方向。默认值为 row，表示水平方向从左到右。设置为 column，将会垂直方向从上到下。
• justify-content: 确定子元素在主轴上的对齐方式。默认值为 flex-start，表示靠左对齐。其他值包括 flex-end（靠右对齐）、center（居中对齐）、space-between（等间距对齐，首个子元素靠左，最后一个子元素靠右）、space-around（等间距对齐，子元素之间都有一定的空白）。
• align-items: 确定子元素在交叉轴上的对齐方式。默认值为 stretch，表示子元素会拉伸以填满整个容器。其他值包括 flex-start（靠上对齐）、flex-end（靠下对齐）、center（居中对齐）。
• align-content: 当有多行或列时，确定多行或列在容器内的对齐方式。默认值为 stretch，表示子元素会拉伸以填满整个容器。其他值包括 flex-start（靠上对齐）、flex-end（靠下对齐）、center（居中对齐）、space-between（等间距对齐，首行靠上，最后一行靠下）、space-around（等间距对齐，每行之间都有一定的空白）。

例如，以下代码将创建一个 Flexbox 容器，并设置其排列方向和间距：

.container {
  display: flex;
  flex-direction: column; /* 垂直排列子元素 */
  justify-content: space-between; /* 充分利用剩余空间 */
  align-items: center; /* 垂直中心对齐子元素 */
}

总结

以上是 Flexbox 的基础使用方法，包括定义 Flexbox 容器、定义子元素的位置和大小、控制排列方向和间距。通过这些属性，可以创建响应式的布局，适应不同设备和屏幕尺寸。对于需要更复杂布局的项目，可以进一步学习更高级的 Flexbox 技巧和属性，例如：flex-wrap、order、flex-flow 等。