在 Flexbox 中显示 - CSS

Flexbox 是一种非常强大的 CSS 布局方式，它提供了一种简单、灵活的方法来对页面进行布局。使用 Flexbox，我们可以轻松的排列和对齐元素，即使是在不同大小的设备上也可以适应不同的分辨率。

Flexbox的基本概念

在使用 Flexbox 之前，我们需要先了解一些基本概念。

Flex 容器（Flex Container）：是使用了 display: flex 或 display: inline-flex 属性的元素。它是 Flexbox 布局的父级元素。

Flex 项目（Flex Item）：是容器内直接子元素，是要进行排版布局的对象。

轴（Axis）：容器的主轴（Main Axis）和交叉轴（Cross Axis）。

在理解了这些概念后，我们就可以使用 Flexbox 来进行布局啦。

Flexbox 的基本使用

先看一下 Flex Item 的属性

Flex Item 的相关属性一般都是写在子元素上的，下面是一些常用的属性。

• flex：可以缩写成 flex-grow, flex-shrink, flex-basis，其中flex-grow是设置子元素的扩展比例，flex-shrink是设置子元素的收缩比例，而 flex-basis 则是设置子元素的基本大小。
• order：顾名思义，表示子元素的展示顺序。
• align-self：子元素在交叉轴上的对齐方式。
• flex-basis：子元素在主轴方向上的初始宽度。

接下来看一下 Flex Container 的属性

容器的属性比较多，这里我们只介绍一些常用的。

• display：使用 flex 或 inline-flex 定义容器。
• flex-direction：定义主轴方向。包括 row、row-reverse、column、column-reverse 四个方向。
• justify-content：定义主轴方向上的对齐方式。包括 flex-start、flex-end、center、space-between、space-around 五个选项。
• align-items：定义交叉轴方向上子元素的对齐方式。包括 flex-start、flex-end、center、baseline、stretch 五个选项。
• align-content：定义多根轴线的对齐方式。包括 flex-start、flex-end、center、space-between、space-around、stretch 六个选项。

示例

下面是一个使用 Flexbox 进行布局的示例代码。

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.item {
  flex: 1 1 auto;
}

.left {
  flex: 0 0 200px;
}

.right {
  flex: 0 0 300px;
}

在这个示例中，我们定义了一个容器 .container，并且将它的 display 属性设置为 flex，表示使用 Flexbox 布局。我们还设置了 flex-direction 属性为 row，表示主轴为水平方向。justify-content 属性设置为 space-between，表示主轴上的排列方式为两端对齐。align-items 属性设置为 center，表示交叉轴方向上的对齐方式为居中。

在容器内，我们定义了三个子元素 item、left、right。其中 item 的 flex 属性设置为 1，表示子元素的扩展比例为 1，即等比例扩展。left 和 right 分别设置为固定的 200px 和 300px。

以上就是一个简单的 Flexbox 布局示例代码。

结束语

Flexbox 是一个非常实用的 CSS 布局方式，它能够轻松的对页面进行布局，而且代码清晰易懂。如果你正在开发一个项目，建议尝试使用 Flexbox 来进行布局，相信它一定能够让你的页面更加出色。