CSS Flexbox 布局是一种强大的前端布局方式，可以实现多种不同类型的布局。在本文中，我们将介绍如何使用 CSS Flexbox 来实现一列固定宽度，另一列自适应的双列布局。
Flexbox 简介
Flexbox 是一个 CSS 模块，它提供了一种灵活的布局方式，可以轻松地定义容器中子元素的位置、大小和顺序。使用 Flexbox 布局，我们可以让元素沿着主轴（水平或垂直方向）排列，并且根据需要将元素相对于其他元素进行对齐和分布。
为了让 Flexbox 布局正常工作，我们需要三个基本的概念：Flex 容器、Flex 项和主轴/交叉轴。Flex 容器是我们定义的父容器，里面包含了多个 Flex 项。主轴是 Flex 容器的主要方向，也就是 Flex 项沿着的方向。默认情况下，主轴是水平方向。交叉轴是与主轴垂直的方向。
实现一列固定宽度，另一列自适应的双列布局
为了实现一列固定宽度，另一列自适应的双列布局，我们可以使用 Flexbox 布局。我们首先定义一个容器，然后在容器内部定义两个子元素，一个固定宽度，一个自适应宽度。我们可以使用 Flexbox 属性来设置这些元素的大小和位置，以便实现所需的布局。
下面是一个实际的示例，演示了如何使用 CSS Flexbox 来实现一列固定宽度，另一列自适应的双列布局：
-- -------------------- ---- -------
--------- -----
------
------
-------
---------- -
-------- -----
--------------- ----
-
------------- -
------ ------
----------------- ----------
-------- -----
-
------------- -
----- --
----------------- -----
------ ------
-------- -----
-
--------
-------
------
---- ------------------
---- ---------------------
--------- -----------
------- ------ --- - ----- ----- -- --- -----------
------
---- ---------------------
--------- -----------
------- ------ ---- ---- --- --------- ----- -- --- --------------
------
------
-------
-------在上面的示例中，我们首先定义了一个 Flex 容器，该容器被设置为 display: flex。接着我们设置了 Flex 容器的主轴方向为水平方向，这样两列就会并列显示。我们为第一个列设置了一个固定的宽度，即 width: 200px，同时还设置了背景颜色和内边距。
对于第二个列，我们将其设置为 flex: 1，这样它就会自动填充剩余的空间。此外，我们还为第二列设置了背景颜色和内边距。
总结
在本文中，我们了解了 CSS Flexbox 布局的基本概念，以及如何使用该技术来实现一列固定宽度，另一列自适应的双列布局。这种布局对于许多不同的网页布局都非常有用，因此学会如何使用 Flexbox 对于任何前端开发人员来说都是非常重要的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6487959d48841e9894630aea