使用 CSS Flexbox 实现左右布局-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，左右布局是极其常见的一种布局方式。虽然早期我们常常使用 float 以及 position 属性实现这种布局，但随着 CSS3 引入 Flexbox 模型，我们已经有了更好的选择。今天，我们就来学习一下使用 CSS Flexbox 实现左右布局的方法。

Flexbox 布局简介

Flexbox 是一个弹性布局模型，可以使我们更容易地实现复杂的布局。它的特点包括：

容器和项目之间的相对定位
项目可以按照设定的比例分配空间
可以沿着同一条轴线对项目进行布局
可以用于创建响应式布局等等

使用 Flexbox 实现左右布局

首先，我们需要创建一个容器并将其设置为 Flex 布局模式。下面是示例代码：

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

.container {
  display: flex;
}

接下来，我们需要分配左右两个项目所占的空间比例。我们可以使用 flex 属性来进行设置，其值可以是一个数字（代表比例），也可以是一个关键字（如 auto，代表自动分配空间）。下面是示例代码：

.left {
  flex: 1;
}

.right {
  flex: 2;
}

到这里，我们已经成功实现了一个左右布局。左边的项目占据了一份空间比例，右边的项目占据了两份空间比例。

Flexbox 布局的更多用法

除了上述介绍的基本用法之外，Flexbox 布局还有很多用法。这里我们简要介绍一下其中几个常见的用法。

项目对齐方式

Flexbox 布局可以控制项目在容器中的对齐方式。通过设置 align-items 属性（垂直轴线方向，即在项目所占行的方向上）或 justify-content 属性（水平轴线方向，即在容器的主轴方向上）来进行控制。下面是其中几个值的说明：

align-items：flex-start、flex-end、center、baseline、stretch
justify-content：flex-start、flex-end、center、space-between、space-around、space-evenly

换行

当一行中的元素超出容器的宽度时，可以通过使用 flex-wrap 属性来进行换行。

.container {
  flex-wrap: wrap;
}

项目排序

当项目的分配比例一样时，可以使用 order 属性控制项目的排序。

<div class="container">
  <div class="item1" order="3">1</div>
  <div class="item2" order="2">2</div>
  <div class="item3" order="1">3</div>
</div>

响应式布局

Flexbox 布局可以用于创建响应式布局，通过设置 media query 和不同的 flex 属性值来实现在不同设备上的展示布局。下面是示例代码：

-- -------------------- ---- -------
---------- -
  -------- -----
  ---------- -----
-

------ ------ --- ----------- ------ -
  ----- -
    ----- --
    ------ --
  -

  ------ -
    ----- --
    ------ --
  -
-

总结

通过对 Flexbox 布局的学习和实践，我们可以更容易地实现复杂的布局。在实际开发过程中，我们应该多加掌握其用法，从而提高开发效率和页面质量。

参考链接

阮一峰的 Flex 布局教程

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