CSS Flexbox 实战：五类常见布局样式解析

CSS Flexbox 是一个强大的布局模式，它能够让开发者更加自由地控制页面元素的排列和分布。本文将介绍五种常见的布局样式，并提供详细的解析和示例代码，帮助读者更好地理解和应用 CSS Flexbox。

一、水平居中

在页面中，我们经常需要将某个元素水平居中，比如一个标题或者一个按钮。使用 CSS Flexbox 可以轻松实现这一效果。

HTML 代码：

<div class="container">
  <div class="item">这是一个标题</div>
</div>

CSS 代码：

// www.javascriptcn.com code example
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.item {
  font-size: 24px;
}

在上面的代码中，我们将父元素 .container 设置为 Flexbox 布局，并使用 justify-content: center 和 align-items: center 将子元素 .item 水平和垂直居中。这里还设置了一个高度为 200px 的容器，以便更好地展示效果。

二、垂直居中

除了水平居中，垂直居中也是常见的布局需求。使用 CSS Flexbox 可以轻松实现垂直居中，而不需要使用传统的 CSS 技巧。

HTML 代码：

<div class="container">
  <div class="item">这是一个标题</div>
</div>

CSS 代码：

// www.javascriptcn.com code example
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.item {
  font-size: 24px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

在上面的代码中，我们使用了一个比较奇特的 CSS 技巧，将子元素 .item 旋转了 180 度，然后使用 writing-mode: vertical-rl 将文字竖向排列。这样就可以实现垂直居中的效果了。

三、两端对齐

有时候我们需要将一些元素按照两端对齐的方式排列，比如一个导航栏或者一个列表。使用 CSS Flexbox 可以轻松实现这一效果。

HTML 代码：

<div class="container">
  <div class="item">首页</div>
  <div class="item">产品中心</div>
  <div class="item">关于我们</div>
</div>

CSS 代码：

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

.item {
  font-size: 18px;
}

在上面的代码中，我们将父元素 .container 设置为 Flexbox 布局，并使用 justify-content: space-between 将子元素 .item 按照两端对齐的方式排列。

四、等分布局

有时候我们需要将一些元素等分排列，比如一个图片墙或者一个图标列表。使用 CSS Flexbox 可以轻松实现这一效果。

HTML 代码：

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

CSS 代码：

// www.javascriptcn.com code example
.container {
  display: flex;
  justify-content: space-between;
}

.item {
  flex-basis: 25%;
  height: 100px;
  background-color: #ccc;
}

在上面的代码中，我们将父元素 .container 设置为 Flexbox 布局，并使用 flex-basis: 25% 将子元素 .item 平均分成四份。这里还设置了一个高度为 100px 的容器，以便更好地展示效果。

五、响应式布局

在移动端设备上，布局通常需要做出一些调整，比如将元素按照垂直方向排列或者将某些元素隐藏起来。使用 CSS Flexbox 可以轻松实现响应式布局。

HTML 代码：

<div class="container">
  <div class="item">这是一个标题</div>
  <div class="item">这是一段描述文字</div>
  <div class="item">这是一个按钮</div>
</div>

CSS 代码：

// www.javascriptcn.com code example
.container {
  display: flex;
  flex-direction: column;
}

.item {
  font-size: 18px;
  padding: 10px;
}

@media (min-width: 768px) {
  .container {
    flex-direction: row;
    justify-content: space-between;
  }

  .item {
    flex-basis: 30%;
  }
}

@media (min-width: 992px) {
  .item {
    font-size: 24px;
  }
}

在上面的代码中，我们首先将父元素 .container 设置为垂直排列，然后使用媒体查询在不同的屏幕尺寸下调整布局。在屏幕宽度大于 768px 的时候，我们将父元素 .container 设置为水平排列，并使用 justify-content: space-between 将元素按照两端对齐的方式排列。同时，我们还将子元素 .item 的宽度设置为 30%。在屏幕宽度大于 992px 的时候，我们将子元素 .item 的字体大小设置为 24px。

结语

本文介绍了五种常见的 CSS Flexbox 布局样式，包括水平居中、垂直居中、两端对齐、等分布局和响应式布局。通过这些示例，读者可以更好地理解和应用 CSS Flexbox，从而更加自由地控制页面元素的排列和分布。

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