CSS Flexbox布局模型 – display: flex、box、flexbox

在本文中，我们将介绍CSS中最常用的布局模型之一——Flexbox(弹性盒子)布局模型。我们将深入了解display属性的三个关键值：flex、box和flexbox，以及它们在页面布局中的用法和示例。

阅读更多：CSS 教程

1. display: flex

display: flex是Flexbox布局模型的核心属性值，用于创建一个容器并定义其内部项目的布局方式。通过将此属性值应用于父元素，我们可以将子元素按照一定的规则进行排列和排序。下面是一些常用的示例用法：

1.1 创建一个基本的Flex容器

.container {
  display: flex;
}

在上述代码中，我们通过将display属性设置为flex来创建一个Flex容器。容器内的子元素将按照行排列，默认情况下即为一行。我们可以通过调整容器的其他属性来修改子元素的布局方式。

1.2 修改子元素的对齐方式

.container {
  display: flex;
  justify-content: center; /* 横向居中对齐 */
  align-items: center; /* 纵向居中对齐 */
}

通过使用justify-content和align-items属性，我们可以调整子元素的对齐方式。justify-content属性控制子元素在容器内的水平对齐方式，而align-items属性控制子元素在容器内的垂直对齐方式。

1.3 默认的Flex容器排列方式

.container {
  display: flex;
  flex-wrap: wrap;
}

在默认情况下，Flex容器内的子元素将自动从左向右排列，并且当子元素的宽度超出容器宽度时会自动换行。这是由于flex-wrap属性默认值为wrap。我们可以将flex-wrap属性的值改为nowrap以禁止子元素换行。

2. display: box

display: box是Flexbox布局模型的早期版本，现在已经不再推荐使用。它的工作原理与display: flex类似，都是通过将此属性应用于父元素来创建一个Flex容器。然而，display: box具有一些限制和兼容性问题，因此我们建议使用display: flex来代替。

3. display: flexbox

display: flexbox是Flexbox布局模型的另一种写法，与display: flex等效。它可以用来创建一个Flex容器，并控制其内部项目的布局方式。然而，由于display: flex更加简洁和直观，因此我们更推荐使用display: flex来定义Flex容器。

3.1 创建一个基本的Flex容器（display: flexbox）

.container {
  display: flexbox;
}

以上代码与display: flex相同，都是用来创建一个基本的Flex容器。然而，由于display: flexbox的使用并不常见，我们仍然推荐使用display: flex。

总结

在本文中，我们介绍了CSS中Flexbox布局模型的三个关键属性值：display: flex、display: box和display: flexbox。其中，display: flex是最常用的属性值，用于创建一个Flex容器并定义其内部项目的布局方式。display: box是早期版本的Flexbox布局模型，不再推荐使用。display: flexbox虽然与display: flex等效，但由于其较少使用，我们仍然推荐使用display: flex来定义Flex容器。希望本文能对你理解和使用Flexbox布局模型有所帮助！

参考链接：
– CSS Flexbox布局