CSS display box flex布局方式

在本文中，我们将介绍CSS中的display box flex布局方式。flex布局是一种弹性盒子布局，它可以更好地响应不同设备大小和不同屏幕方向的布局需求，从而让网站更加灵活和适配性更强。

阅读更多：CSS 教程

弹性盒子基础概念

在学习display box flex布局之前，我们需要了解一些弹性盒子的基础概念。弹性盒子主要由以下三个组成部分：

• flex container：弹性盒子容器，是处于整个布局的上下文环境中的元素。
• flex item：弹性盒子的子元素，它是容器中的一个成员。每个成员默认按照容器的主轴排列。
• flex line：弹性盒子由一个或多个flex line组成。每个flex line代表一行元素，其中包含了一或多个flex item。

然后，我们来看一下弹性盒子可能的布局方向，主要包括以下几种：

在学习display box flex布局之前，我们需要了解一些弹性盒子的基础概念。弹性盒子主要由以下三个组成部分：

• flex container：弹性盒子容器，是处于整个布局的上下文环境中的元素。
• flex item：弹性盒子的子元素，它是容器中的一个成员。每个成员默认按照容器的主轴排列。
• flex line：弹性盒子由一个或多个flex line组成。每个flex line代表一行元素，其中包含了一或多个flex item。

然后，我们来看一下弹性盒子可能的布局方向，主要包括以下几种：

display: flex

在静态布局中，我们通常使用float、position和inline-block等属性来实现页面布局，而这些属性常常会出现一些问题，比如元素间距难以控制、元素宽高比例不好控制等。因此，我们可以使用display: flex属性来代替传统的布局方式。

设置主轴方向

display: flex属性可以让我们创建一个弹性盒子容器，从而实现更简明的布局方式。首先，我们需要使用display: flex来设置容器，然后再使用flex-direction属性来设置主轴方向。比如：

.container {
  display: flex;
  flex-direction: row;
}

.container-reverse {
  display: flex;
  flex-direction: row-reverse;
}

设置容器在主轴上对齐方式

我们还可以使用justify-content属性来设置容器在主轴上的对齐方式。justify-content有以下几种属性值：

• flex-start：默认值，容器在主轴上顶部与容器边框对齐。
• flex-end：容器在主轴上底部与容器边框对齐。
• center：容器在主轴上居中对齐。
• space-between：两端对齐，项目之间的间隔都相等。
• space-around：每个项目两侧的间隔相等。

.container {
  display: flex;
  justify-content: space-between;
}

设置容器在交叉轴上对齐方式

与之相似，我们还可以使用align-items属性来设置容器在交叉轴上的对齐方式。align-items有以下几种属性值：

• stretch：默认值，容器高度占满整个交叉轴。
• flex-start：交叉轴的起点对齐。
• flex-end：交叉轴的终点对齐。
• center：交叉轴的中点对齐。
• baseline：元素的基线对齐。

.container {
  display: flex;
  align-items: center;
}

flex-grow/flex-shrink/flex-basis

当需要按比例分配剩余空间时，我们可以使用flex-grow属性。flex-grow的默认值为0，表示每个元素在空间分配方面等分。将某个元素的flex-grow属性设置为非0值表示该元素可以获得剩余空间的比例。比如，如果容器高度为500px，其中一个元素设置flex-grow: 1，则该元素的高度为500px乘以分配比例。如果另一个元素设置flex-grow：2，则该元素高度为500乘以2再除以3。如果所有元素的flex-grow都为1，则所有元素等分容器剩余空间。

.container {
  display: flex;
}

.item {
  flex-grow: 1;
}

在实际中，我们可能会需要限制元素缩小的最小大小。在这种情况下，flex-shrink属性可以帮助我们限制空间分配。如果flex-shrink被设置为0，则其他元素不会缩小以使该元素保持原来的大小。flex-shrink的值越大，则压缩该元素的空间越大。如果所有元素的flex-shrink值均为1，则当空间不足时，它们将等分空间。如果有一个元素的flex-shrink值为0，则其他元素将在计算时进行动态分配。

.container {
  display: flex;
  width: 400px;
}

.item {
  flex-shrink: 0;
  /* 限制缩小后的宽度最小值 */
  min-width: 80px;
}

同时，我们还可以使用flex-basis属性来定义元素在分配空间之前的初始大小。flex-basis的默认值为auto，表示元素将根据自身的内容计算大小。flex-basis通常与flex-grow或flex-shrink一起使用。

.container {
  display: flex;
}

.item {
  flex-basis: 200px;
  flex-grow: 1;
}

flex-wrap/flex-flow

当元素太多无法全部显示在容器中时，我们可以通过flex-wrap属性使元素从一排扩展到多排。flex-wrap有以下几个属性值：

• nowrap：强制所有元素都在一行内。
• wrap：元素在多行中显示。
• wrap-reverse：元素在多行中显示，但是逆序排列。

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

另外，我们也可以使用flex-flow属性来同时设置flex-direction和flex-wrap属性。

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

align-content

当元素在交叉轴上排列时，我们可以使用align-content属性来定义多行之间的对齐方式。align-content有以下几个属性值：

• stretch：默认值，元素高度占据整个交叉轴。
• flex-start：多行容器开头对齐。
• flex-end：多行容器结尾对齐。
• center：多行容器居中对齐。
• space-between：容器的行之间分配相等的空间，左右两端没有间隔。
• space-around：容器的行之间分配相等的空间，左右两端空间为其他间隔的一半大小。

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
}

flex布局的应用实例

水平居中

在传统布局中，我们使用text-align: center属性来使一个块级元素水平居中。在flex布局中，我们可以使用justify-content属性来实现同样的效果。

.container {
  display: flex;
  justify-content: center;
}

垂直居中

在传统布局中，垂直居中可能不是很容易实现。而在flex布局中，我们可以使用align-items属性来实现。

.container {
  display: flex;
  align-items: center;
}

等高布局

在传统布局中，我们常常需要设定元素高度并使用float或inline-block属性来实现等高布局。在flex布局中，因为元素在交叉轴上自动对齐，因此可以方便地实现等高布局。

.container {
  display: flex;
  align-items: stretch;
}

按钮组布局

在按钮组布局中，我们可以使用flex布局来轻松实现元素在一排中均分剩余宽度的效果，而不需要计算每个元素的宽度。

.container {
  display: flex;
  justify-content: space-between;
}

.button {
  flex-grow: 1;
}

总结

CSS中的display box flex布局可以方便地实现传统布局方式无法实现的效果，例如灵活的元素间隔控制、元素等高布局和元素在任意方向上的对齐等。同时，合理地使用flex-grow、flex-shrink和flex-basis等属性，我们可以方便地控制元素在宽度方面的分配，从而实现更好的响应式布局。