Flexbox（弹性盒子模型）是一种用于进行布局的 CSS3 属性，它可以方便地实现各种复杂的布局效果，而且非常适合响应式设计。在本文中，我们将介绍如何使用 Flexbox 布局实现网页分栏布局，并且通过代码示例进行详细讲解。
什么是网页分栏布局
网页分栏布局是指将一个网页分成多个栏，每个栏可以包含不同的内容，比如文本、图片、视频等。这种布局非常适合展示多个相关信息，也方便用户浏览和比较不同的内容。
在传统的网页开发中，实现分栏布局通常需要使用复杂的浮动（float）和定位（position）等技术，并且难以适应不同设备的屏幕大小。而使用 Flexbox 布局可以简单地实现网页分栏布局，并且可以自适应不同设备的屏幕大小。
使用 Flexbox 布局实现网页分栏布局
在 Flexbox 布局中，我们可以通过设置 container（容器）的 display 属性为 flex，来定义一个弹性容器。这个容器内的所有子元素都可以成为弹性项，这些项可以通过设置 flex 属性来控制它们占据的空间和在容器内的排列方式。
下面是一个简单的例子：
<div class="container"> <div class="item1">容器 1</div> <div class="item2">容器 2</div> <div class="item3">容器 3</div> </div>
.container {
display: flex;
}在上面的例子中，我们定义了一个名为 container 的容器，并将其 display 属性设置为 flex。这意味着里面的所有子元素都可以进行弹性布局了。
接下来，我们可以通过设置每个子元素的 flex 属性来控制它们在容器内的占据空间和位置。默认情况下，每个子元素的 flex 属性值都是 0，即它们的空间大小将根据内容自适应。但是，我们可以通过将某个子元素的 flex 值设为大于 0 的数值来让它占据更多的空间，例如：
.item1 {
flex: 1;
}
.item2 {
flex: 2;
}在上面的例子中，我们设定了 item1 的 flex 值为 1，item2 的 flex 值为 2。这意味着 item1 将占据 1/3 的空间，item2 将占据 2/3 的空间，因为它们的 flex 值之和为 3。当容器的空间大小改变时，这些弹性项的大小也会自动调整。
实例：使用 Flexbox 布局实现网页分栏布局
下面是一个简单的例子，演示如何使用 Flexbox 布局实现一个分栏网页布局。该网页包含一个头部（header）、两个栏（左栏和右栏）和一个底部（footer），其中左栏和右栏的宽度分别为 25% 和 75%。这个布局可以自适应不同设备的屏幕大小，并且可以完美地实现分栏效果。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------- ------------------
-------
- -
----------- -----------
-
---- -
------- --
-------- --
-
------- ------ -
------- -----
----------------- --------
----------- -------
------------ -----
-
---------- -
-------- -----
---------- -----
------- - -----
-
---------- - --- -
-------- -----
------- ------
------ -----
--------- -------
-
----- -
----------------- --------
----- --
-
------ -
----------------- --------
----- --
-
--------
-------
------
-------------------
---- ------------------
---- ---------------------
---- ----------------------
------
-------------------
-------
-------在上面的例子中，我们定义了一个名为 container 的容器，并将其 flex-wrap 属性设置为 wrap。这意味着当容器内的项目宽度超过容器宽度时，它们将自动换行到下一行。然后，我们分别定义了一个名为 left 和 right 的左栏和右栏，并使用 flex 属性将它们的宽度分别设为 1 和 3。最后，我们在页面顶部和底部都添加了一个简单的头部和底部。
总结
Flexbox 布局是一种方便且强大的 CSS3 属性，可以简化网页布局的实现，并能够自适应不同设备的屏幕大小。在本文中，我们详细讲解了如何使用 Flexbox 布局实现网页分栏布局，并通过示例代码进行了演示。无论你是新手还是老手，在使用 CSS 布局时都应该掌握这一重要技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6656e450d3423812e4be973a