老年人也能看懂的 CSS Flexbox-JavaScript中文网-JavaScript教程资源分享门户

CSS Flexbox 是一种用于布局的强大工具，它可以让我们更轻松地创建具有响应性的网页布局。本文将详细介绍 Flexbox 的各种属性及其用法，让你轻松掌握这个技术。

什么是 Flexbox？

Flexbox 是一个用于网页布局的 CSS 模块，它提供了一种灵活的方式来排列和分布网页中的元素。使用 Flexbox，你可以轻松地创建自适应布局，使网页在不同大小的屏幕上都能够正常显示。

Flexbox 的基本概念

在了解 Flexbox 的具体用法之前，我们需要先了解一些基本概念。Flexbox 布局中包含两个主要的概念：容器和项目。

容器

容器是指包含 Flexbox 布局的元素，我们也称其为 Flex 容器。要将一个元素设置为 Flex 容器，可以使用以下 CSS 属性：

.container {
  display: flex;
}

这个样式将把 .container 元素设置为 Flex 容器。

项目

项目是指 Flex 容器中的子元素，我们也称其为 Flex 项目。Flex 项目可以沿着 Flex 容器的主轴（main axis）或交叉轴（cross axis）进行排列。默认情况下，Flex 项目会沿着主轴水平排列，并沿着交叉轴垂直对齐。

Flexbox 的属性

了解了 Flexbox 的基本概念后，我们来看一下 Flexbox 的各种属性及其用法。

`flex-direction`

flex-direction 属性用于设置 Flex 容器中 Flex 项目的排列方向。它有四个可选值：

row：默认值，表示 Flex 项目沿着主轴水平排列；
row-reverse：表示 Flex 项目沿着主轴反向水平排列；
column：表示 Flex 项目沿着交叉轴垂直排列；
column-reverse：表示 Flex 项目沿着交叉轴反向垂直排列。

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

这个样式将把 .container 元素设置为 Flex 容器，并将其中的 Flex 项目沿着主轴水平排列。

`flex-wrap`

flex-wrap 属性用于设置 Flex 项目是否可以换行。它有三个可选值：

nowrap：默认值，表示 Flex 项目不换行；
wrap：表示 Flex 项目可以换行，但是不会在项目之间插入换行符；
wrap-reverse：表示 Flex 项目可以换行，并且会在项目之间插入换行符。

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

这个样式将把 .container 元素设置为 Flex 容器，并允许其中的 Flex 项目换行。

`flex-flow`

flex-flow 属性是 flex-direction 和 flex-wrap 两个属性的缩写。它的值必须按照以下顺序给出：

flex-direction 的值 + 空格 + flex-wrap 的值

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

这个样式将把 .container 元素设置为 Flex 容器，并将其中的 Flex 项目沿着主轴水平排列，允许 Flex 项目换行。

`justify-content`

justify-content 属性用于设置 Flex 项目在主轴上的对齐方式。它有五个可选值：

flex-start：默认值，表示 Flex 项目在主轴上靠左对齐；
flex-end：表示 Flex 项目在主轴上靠右对齐；
center：表示 Flex 项目在主轴上居中对齐；
space-between：表示 Flex 项目在主轴上均匀分布，且项目之间有空隙；
space-around：表示 Flex 项目在主轴上均匀分布，且项目之间有空隙，且项目两侧的空隙是项目之间空隙的一半。

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

这个样式将把 .container 元素设置为 Flex 容器，并将其中的 Flex 项目在主轴上居中对齐。

`align-items`

align-items 属性用于设置 Flex 项目在交叉轴上的对齐方式。它有五个可选值：

stretch：默认值，表示 Flex 项目在交叉轴上拉伸以填满整个容器；
flex-start：表示 Flex 项目在交叉轴上靠上对齐；
flex-end：表示 Flex 项目在交叉轴上靠下对齐；
center：表示 Flex 项目在交叉轴上居中对齐；
baseline：表示 Flex 项目在交叉轴上以基线对齐。

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

这个样式将把 .container 元素设置为 Flex 容器，并将其中的 Flex 项目在交叉轴上居中对齐。

`align-content`

align-content 属性用于设置多行 Flex 项目在交叉轴上的对齐方式。它有五个可选值：

stretch：默认值，表示多行 Flex 项目在交叉轴上拉伸以填满整个容器；
flex-start：表示多行 Flex 项目在交叉轴上靠上对齐；
flex-end：表示多行 Flex 项目在交叉轴上靠下对齐；
center：表示多行 Flex 项目在交叉轴上居中对齐；
space-between：表示多行 Flex 项目在交叉轴上均匀分布，且项目之间有空隙；
space-around：表示多行 Flex 项目在交叉轴上均匀分布，且项目之间有空隙，且项目两侧的空隙是项目之间空隙的一半。

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

这个样式将把 .container 元素设置为 Flex 容器，并允许其中的 Flex 项目换行，多行 Flex 项目在交叉轴上居中对齐。

`order`

order 属性用于设置 Flex 项目的排列顺序。默认情况下，Flex 项目的 order 值为 0，表示按照 HTML 中的顺序排列。order 值越小的 Flex 项目排列越靠前。

.container {
  display: flex;
}

.item {
  order: 2;
}

这个样式将把 .container 元素设置为 Flex 容器，并将其中的 .item 元素设置为第二个排列。

`flex-grow`

flex-grow 属性用于设置 Flex 项目在空间分配上的比例。默认情况下，Flex 项目的 flex-grow 值为 0，表示不会分配额外的空间。如果多个 Flex 项目都设置了 flex-grow 属性，那么它们将按照比例分配剩余的空间。

.container {
  display: flex;
}

.item {
  flex-grow: 1;
}

这个样式将把 .container 元素设置为 Flex 容器，并将其中的 .item 元素设置为可以分配剩余空间的项目。

`flex-shrink`

flex-shrink 属性用于设置 Flex 项目在空间不足时的缩小比例。默认情况下，Flex 项目的 flex-shrink 值为 1，表示可以缩小。如果多个 Flex 项目都设置了 flex-shrink 属性，那么它们将按照比例缩小。

.container {
  display: flex;
}

.item {
  flex-shrink: 1;
}

这个样式将把 .container 元素设置为 Flex 容器，并将其中的 .item 元素设置为可以缩小的项目。

`flex-basis`

flex-basis 属性用于设置 Flex 项目在分配空间之前的基础大小。默认情况下，Flex 项目的 flex-basis 值为 auto，表示使用项目的原始大小。如果多个 Flex 项目都设置了 flex-basis 属性，那么它们将按照比例分配空间。

.container {
  display: flex;
}

.item {
  flex-basis: 100px;
}

这个样式将把 .container 元素设置为 Flex 容器，并将其中的 .item 元素设置为 100 像素的基础大小。

`flex`

flex 属性是 flex-grow、flex-shrink 和 flex-basis 三个属性的缩写。它的值必须按照以下顺序给出：

flex-grow 的值 + 空格 + flex-shrink 的值 + 空格 + flex-basis 的值

.container {
  display: flex;
}

.item {
  flex: 1 1 100px;
}

这个样式将把 .container 元素设置为 Flex 容器，并将其中的 .item 元素设置为可以分配剩余空间、可以缩小、基础大小为 100 像素的项目。

示例代码

以下是一个使用 Flexbox 布局的示例代码：

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

// javascriptcn.com code example
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.item {
  flex: 1 1 100px;
  height: 100px;
  margin: 10px;
  background-color: #ccc;
}

这个示例代码将把 .container 元素设置为 Flex 容器，并将其中的 .item 元素设置为可以分配剩余空间、可以缩小、基础大小为 100 像素的项目。同时，它们在主轴和交叉轴上都居中对齐，并允许 Flex 项目换行。

结论

Flexbox 是一种强大的布局工具，它可以让我们更轻松地创建具有响应性的网页布局。本文详细介绍了 Flexbox 的各种属性及其用法，希望能够帮助你更好地掌握这个技术。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/673d8173de2dedaeef3a6e05