详解CSS Flexbox，附带示例

末蓝、 2023-01-10 05:09 124阅读 0赞

![format_png][]

英文 | https://medium.com/javascript-in-plain-english/css-flexbox-explained-with-examples-85efa38e4770

翻译 | web前端开发（ID：web\_qdkf)

# **介绍**    #

Flexbox已是CSS的大功能之一。它被设计为布局模型，并且设计为可以在界面中的项目之间提供空间分布并具有强大的对齐功能的方法。

Flexbox无需使用浮动或定位即可轻松的实现响应式布局结构。

在本文中，我们将通过一些实际示例来学习CSS flexbox。让我们开始吧。

# **定义一个容器** #

在开始使用flexbox，你需要定义一个容器div或一个父容器，在div中包括所有子元素，如下所示：

div通过将display属性设置为flex，可以使父项或容器变得灵活：

.container {
      display: flex;
      background-color: red;
    }
    .container div{
      background-color: #f1f1f1;
      margin: 10px;
      padding: 20px;
      font-size: 30px;
    }

输出结果如下：

![format_png 1][]

包含三个div的红色容器

如你所见，通过将display属性设置为flex，容器的子元素将自动变为弹性项目。现在，你可以使用容器属性justify-content align-items，例如，以便使子元素在容器div中居中。我们将在下面的示例中进行介绍。

# **flex-direction属性** #

flex-direction属性定义容器要在哪个（列或行）方向上堆叠弹性。

下面的示例将flex-direction设置为column（从上到下）。结果，容器div中的子元素将处于垂直线。

看下面的例子：

.container {
      display: flex;
      flex-direction: column;
      background-color: red;
    }
    .container > div {
      background-color: #f1f1f1;
      width: 100px;
      margin: 10px;
      text-align: center;
      line-height: 75px;
      font-size: 30px;
    }

输出结果如下：

![format_png 2][]

列方向

下面这个实例，我们将flex-direction属性设置为row，这将使我们的容器内的元素在一条水平线上：

.container {
      display: flex;
      flex-direction: row;
      background-color: red;
    }
    .container > div {
      background-color: #f1f1f1;
      width: 100px;
      margin: 10px;
      text-align: center;
      line-height: 75px;
      font-size: 30px;
    }

输出结果如下：

![format_png 3][]

行方向

你还可以通过将flex-direction属性设置为column-reverse或来反转容器中子元素的顺序row-reverse。

# **flex-wrap属性** #

flex-wrap属性是指弹性项目。

下面的示例包含12个flex项目，并将属性设置flex-wrap为wrap。为了更好地演示该flex-wrap属性。

我建议你将下面的代码放在文本编辑器或Codepen中，并调整浏览器窗口的大小以查看的功能flex-wrap。

HTml:
    <div class="container">
      <div>1</div>
      <div>2</div>
      <div>3</div>  
      <div>4</div>
      <div>5</div>
      <div>6</div>  
      <div>7</div>
      <div>8</div>
      <div>9</div>  
      <div>10</div>
      <div>11</div>
      <div>12</div>  
    </div>
    CSS:
    .container {
      display: flex;
      flex-wrap: wrap;
      background-color: red;
    }
    .container > div {
      background-color: #f1f1f1;
      width: 100px;
      margin: 10px;
      text-align: center;
      line-height: 75px;
      font-size: 30px;
    }

如果不希望flex-item包括子元素，则可以将属性设置为nowrap，如下所示：

.container {
      display: flex;
      flex-wrap: nowrap;
      background-color: red;
    }

# **justify-content属性**    #

justify-content属性用于对齐弹性项目。你可以给这个属性一些值，如：center，flex-start，flex-end，space-between等。

将justify-content属性设置为center：

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

![format_png 4][]

将justify-content属性设置为flex-start：

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

![format_png 5][]

将justify-content属性设置为flex-end：

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

![format_png 6][]

将justify-content属性设置为space-between：

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

![format_png 7][]

# **align-items属性** #

align-items属性用于对齐弹性项目。与justify-content基本相同，但align-items是垂直而不是水平。这就是为什么我只给出一个示例，而不是重复相同的示例。

因此，以下示例将子元素垂直居中放置在容器中：

.container {
      display: flex;
      height: 300px;
      align-items: center;
      background-color: red;
    }
    .container > div {
      background-color: #f1f1f1;
      width: 100px;
      margin: 10px;
      text-align: center;
      line-height: 75px;
      font-size: 30px;
    }

输出结果如下：

![format_png 8][]

将子元素垂直居中

align-items属性的值与justify-content相同。唯一的区别是，align-items在垂直而不是水平地工作。

# **垂直和水平居中** #

现在，你可以同时使用justify-content和align-items同时将子元素垂直和水平居中。

这是一个例子：

.container {
      display: flex;
      height: 300px;
      align-items: center;
      justify-content: center;
      background-color: red;
    }
    .container > div {
      background-color: #f1f1f1;
      width: 100px;
      margin: 10px;
      text-align: center;
      line-height: 75px;
      font-size: 30px;
    }

![format_png 9][]

垂直和水平居中

# **子元素** #

你还应该了解一下以下的子元素，我想你会从中受益的，例如：

*  order
 *  flex-grow
 *  flex-shrink
 *  flex-basis
 *  flex
 *  align-self

# **结论** #

Flexbox是一项很棒的CSS功能，可让你轻松设计灵活的响应式布局结构。我强烈建议你练习此功能，因为练习是提高此功能的唯一方法。

本文完〜

最后

*  欢迎加我微信(winty230)，拉你进技术群，长期交流学习...  
    
 *  欢迎关注「前端Q」,认真学前端，做个专业的技术人...

![format_png 10][]

![format_png 11][]

点个**在看**支持我吧

![format_png 12][]

[format_png]: /images/20221119/b481c861365e45b4b0047104b361e522.png
[format_png 1]: /images/20221119/c17b69f834e44954a95bdaea27cfabfa.png
[format_png 2]: /images/20221119/2b4e69ee889b495fb38ec99723f2ca1a.png
[format_png 3]: /images/20221119/a73eaa97314f4794a3e05c7b7103d3d5.png
[format_png 4]: /images/20221119/fea839ffea774213b50d25028fae3322.png
[format_png 5]: /images/20221119/40219d46cbd84a11bf264503defac3dc.png
[format_png 6]: /images/20221119/a969c1a98a0745b3ab41bccd00974cdc.png
[format_png 7]: /images/20221119/381d3b81f9ea483d81106263b5c693b1.png
[format_png 8]: /images/20221119/77859fba1a564fc684c08b728d4c5e6c.png
[format_png 9]: /images/20221119/33a16f8d25674083bf7f281d0ad105e9.png
[format_png 10]: /images/20221119/f15a4862b1cc4977a5393ad2be83f887.png
[format_png 11]: /images/20221119/f197f398b85f49b39d322239137ca0de.png
[format_png 12]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2dpZi83UVJUdmtLMnFDNkJHTkxPUXh3Qm1NVE9HbU8wZFNkM05tT1dzWkJNV2czQkMxbXNkd3R5dkJrTkxZaDF4R0xRaWJtNFFzSGliQ2x3eFdmenVpYmljYkpjSUEvNjQw?x-oss-process=image/format,png