这～就是 CSS3 Flexbox 布局的完美运用-JavaScript中文网-JavaScript教程资源分享门户

什么是 Flexbox 布局？

Flexbox 布局是 CSS3 中的一种新型布局模式，它可以在一个容器中对其子元素进行灵活的排列和对齐。Flexbox 布局的特点是可以让子元素的宽度、高度和顺序自适应容器的大小和空间分配，从而实现不同屏幕尺寸和设备类型下的自适应布局效果。

如何使用 Flexbox 布局？

在 HTML 中，我们可以通过给容器元素（例如 div）添加 display: flex; 的样式来启用 Flexbox 布局。

// www.javascriptcn.com code example
<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

<style>
.container {
  display: flex;
}
.item {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  margin-right: 10px;
}
</style>

上面的代码中，我们创建了一个名为 container 的容器元素，并在其中添加了三个名为 item 的子元素。通过给 container 元素添加 display: flex; 样式，我们启用了 Flexbox 布局，并让子元素在容器中水平排列。

Flexbox 布局的属性

Flexbox 布局的核心是一组相关的 CSS 属性，它们可以用来控制子元素的排列和对齐方式。下面我们来逐一介绍这些属性。

flex-direction

flex-direction 属性用来指定子元素的排列方向，可以设置为 row（默认值，表示水平排列）、column（表示垂直排列）、row-reverse（表示反向水平排列）或 column-reverse（表示反向垂直排列）。

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

justify-content

justify-content 属性用来指定子元素在主轴上的对齐方式，可以设置为 flex-start（默认值，表示左对齐）、flex-end（表示右对齐）、center（表示居中对齐）、space-between（表示两端对齐，子元素之间的间距相等）或 space-around（表示子元素之间的间距相等，子元素与容器边缘的间距也相等）。

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

align-items

align-items 属性用来指定子元素在交叉轴上的对齐方式，可以设置为 flex-start（表示顶部对齐）、flex-end（表示底部对齐）、center（表示居中对齐）、baseline（表示基线对齐）或 stretch（默认值，表示拉伸对齐，子元素将占满整个交叉轴）。

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

flex-wrap

flex-wrap 属性用来指定子元素是否换行，可以设置为 nowrap（默认值，表示不换行）、wrap（表示换行，第一行在上方）或 wrap-reverse（表示换行，第一行在下方）。

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

align-content

align-content 属性用来指定多行子元素在交叉轴上的对齐方式，只有在子元素换行时才会生效，可以设置为 flex-start（表示顶部对齐）、flex-end（表示底部对齐）、center（表示居中对齐）、space-between（表示两端对齐，子元素之间的间距相等）或 space-around（表示子元素之间的间距相等，子元素与容器边缘的间距也相等）。

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

order

order 属性用来指定子元素的顺序，可以为任何整数值，值越小越靠前。默认情况下，子元素的顺序和它们在 HTML 中出现的顺序相同。

.item:nth-child(2) {
  order: 1;
}

flex-grow

flex-grow 属性用来指定子元素在剩余空间中的放大比例，默认值为 0，表示不放大。如果所有子元素的 flex-grow 值都为 1，它们将平分剩余空间。

.item:nth-child(2) {
  flex-grow: 2;
}

flex-shrink

flex-shrink 属性用来指定子元素在空间不足时的缩小比例，默认值为 1，表示等比例缩小。如果所有子元素的 flex-shrink 值都为 0，它们将不会缩小。

.item:nth-child(2) {
  flex-shrink: 0;
}

flex-basis

flex-basis 属性用来指定子元素的初始大小，可以为长度值或百分比。如果所有子元素的 flex-basis 值都为 0，它们将平分容器的空间。

.item:nth-child(2) {
  flex-basis: 150px;
}

flex

flex 属性是 flex-grow、flex-shrink 和 flex-basis 三个属性的缩写形式，可以一次性设置它们的值。

.item:nth-child(2) {
  flex: 1 0 150px;
}

Flexbox 布局的优势

使用 Flexbox 布局可以带来许多优势，包括：

灵活性：Flexbox 布局可以让子元素自适应容器的大小和空间分配，从而实现不同屏幕尺寸和设备类型下的自适应布局效果。
可读性：Flexbox 布局的属性和值都非常直观和易于理解，而且可以通过简单的调整来实现不同的布局效果。
兼容性：Flexbox 布局已成为现代浏览器的标准特性，而且可以通过一些 polyfill 或 fallback 方案来兼容旧版浏览器。

Flexbox 布局的应用场景

Flexbox 布局可以应用于许多场景，例如：

导航菜单：可以使用 Flexbox 布局实现水平居中、等宽排列、自适应宽度等效果。
图片列表：可以使用 Flexbox 布局实现等高排列、自适应宽度、图片间距等效果。
表单布局：可以使用 Flexbox 布局实现标签和输入框的对齐、自适应宽度、换行排列等效果。
响应式布局：可以使用 Flexbox 布局实现不同屏幕尺寸下的自适应布局，从而提高用户体验和页面性能。

示例代码

下面是一个使用 Flexbox 布局实现导航菜单的示例代码：

// www.javascriptcn.com code example
<nav class="menu">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Contact</a>
</nav>

<style>
.menu {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  background-color: #f2f2f2;
}
.menu a {
  display: block;
  padding: 0 20px;
  color: #333;
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}
</style>

在上面的代码中，我们创建了一个名为 menu 的导航菜单，通过给它添加 display: flex; 样式启用了 Flexbox 布局。然后，我们使用 justify-content: center; 和 align-items: center; 属性让菜单水平和垂直居中对齐。最后，我们对菜单项进行了一些样式设置，以达到更好的视觉效果。

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

这～就是 CSS3 Flexbox 布局的完美运用