在前端开发中，经常需要实现一些特定的布局，比如左右两端固定，中间自适应宽度的布局。这种布局在传统的 CSS 布局中比较难实现，但在 CSS3 中引入了 Flexbox 布局，可以轻松实现这种布局。本文将介绍如何使用 CSS Flexbox 布局实现左右两端固定，中间自适应宽度的布局。
CSS Flexbox 布局简介
CSS Flexbox 布局是一种新的布局模式，它可以让容器中的子元素按照一定的规则排列。Flexbox 布局的主要特点是可以让子元素自适应容器的大小，同时可以控制子元素在容器中的位置和排列方式。
Flexbox 布局的实现需要定义一个容器元素，并且使用一些 CSS 属性来控制子元素的排列方式。下面是一些常用的 CSS Flexbox 属性：
display:flex：定义一个 Flexbox 容器。flex-direction：定义子元素的排列方向，可以是row（水平方向）、column（垂直方向）、row-reverse（反向水平方向）或column-reverse（反向垂直方向）。flex-wrap：定义子元素的换行方式，可以是nowrap（不换行）、wrap（按行换行）或wrap-reverse（按行反向换行）。justify-content：定义子元素在主轴上的对齐方式，可以是flex-start（左对齐）、flex-end（右对齐）、center（居中对齐）、space-between（两端对齐，中间间隔相等）、space-around（两端对齐，中间间隔相等，子元素间距相等）或space-evenly（子元素间距相等）。align-items：定义子元素在交叉轴上的对齐方式，可以是flex-start（顶部对齐）、flex-end（底部对齐）、center（居中对齐）、baseline（基线对齐）或stretch（拉伸对齐）。align-content：定义多行子元素在交叉轴上的对齐方式，可以是flex-start（顶部对齐）、flex-end（底部对齐）、center（居中对齐）、space-between（两端对齐，中间间隔相等）、space-around（两端对齐，中间间隔相等，子元素间距相等）或stretch（拉伸对齐）。
左右两端固定，中间自适应宽度布局实现
下面我们就来实现一个左右两端固定，中间自适应宽度的布局。首先，我们创建一个 HTML 文件，并在其中添加一个 Flexbox 容器和三个子元素，如下所示：
--------- -----
------
------
---------- ------- ------------
-------
---------- -
-------- -----
---------------- --------------
------------ -------
----------------- --------
-------- -----
-
----- -
----------------- --------
------ ------
------- -----
-
------ -
----------------- --------
------ ------
------- -----
-
-------- -
----------------- --------
----- --
------- -----
------- - -----
-
--------
-------
------
---- ------------------
---- -------------------
---- ----------------------
---- --------------------
------
-------
-------在上面的代码中，我们定义了一个名为 .container 的 Flexbox 容器，并设置了它的 justify-content 属性为 space-between，表示子元素在主轴上两端对齐，中间间隔相等。同时，我们还设置了容器的 align-items 属性为 center，表示子元素在交叉轴上居中对齐。
容器中包含了三个子元素，分别是左侧固定宽度的 .left 元素、右侧固定宽度的 .right 元素和中间自适应宽度的 .content 元素。其中，我们使用了 .content 元素的 flex 属性，将它的宽度设为自适应，使它可以填充容器中剩余的空间。
最终效果如下图所示：
总结
本文介绍了如何使用 CSS Flexbox 布局实现左右两端固定，中间自适应宽度的布局。通过使用 Flexbox 布局，我们可以轻松实现各种复杂的布局效果，提高前端开发效率。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66400d61d3423812e4e3677a