在前端开发中，左右布局是极其常见的一种布局方式。虽然早期我们常常使用 float 以及 position 属性实现这种布局，但随着 CSS3 引入 Flexbox 模型，我们已经有了更好的选择。今天，我们就来学习一下使用 CSS Flexbox 实现左右布局的方法。
Flexbox 布局简介
Flexbox 是一个弹性布局模型，可以使我们更容易地实现复杂的布局。它的特点包括：
- 容器和项目之间的相对定位
- 项目可以按照设定的比例分配空间
- 可以沿着同一条轴线对项目进行布局
- 可以用于创建响应式布局等等
使用 Flexbox 实现左右布局
首先，我们需要创建一个容器并将其设置为 Flex 布局模式。下面是示例代码：
---- ------------------ ---- ------------------- ---- -------------------- ------
---------- - -------- ----- -
接下来，我们需要分配左右两个项目所占的空间比例。我们可以使用 flex 属性来进行设置，其值可以是一个数字（代表比例），也可以是一个关键字（如 auto，代表自动分配空间）。下面是示例代码：
----- - ----- -- - ------ - ----- -- -
到这里，我们已经成功实现了一个左右布局。左边的项目占据了一份空间比例，右边的项目占据了两份空间比例。
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 属性来进行换行。
---------- - ---------- ----- -
项目排序
当项目的分配比例一样时，可以使用 order 属性控制项目的排序。
---- ------------------ ---- ------------- ----------------- ---- ------------- ----------------- ---- ------------- ----------------- ------
响应式布局
Flexbox 布局可以用于创建响应式布局，通过设置 media query 和不同的 flex 属性值来实现在不同设备上的展示布局。下面是示例代码：
---------- -
-------- -----
---------- -----
-
------ ------ --- ----------- ------ -
----- -
----- --
------ --
-
------ -
----- --
------ --
-
-总结
通过对 Flexbox 布局的学习和实践，我们可以更容易地实现复杂的布局。在实际开发过程中，我们应该多加掌握其用法，从而提高开发效率和页面质量。
参考链接
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64c63f6c10032fedd38c148f