在前端开发中，实现不同布局的页面是常见需求，而其中的垂直分栏布局常常被用于展示不同板块的内容。使用 Flexbox 就是一种优秀的方式来实现这种布局。本文将介绍什么是 Flexbox，如何使用 Flexbox 实现垂直分栏布局以及一些需要注意的细节。
什么是 Flexbox？
Flexbox，即弹性盒子布局，是一种用于进行页面元素布局的模块。它可以让我们更加轻松地构建不同的布局方案，不需要使用复杂的浮动和定位等方式。
Flexbox 布局主要包括两部分：容器和项目。容器是一个包含着项目的父元素，所有的项目都是容器的直接子元素。而项目则是容器内的元素，可以是文本、图像、容器等等任何 HTML 元素。
Flexbox 最常用的应用场景就是实现垂直居中、宽度高度动态自适应等布局效果。
现在我们来介绍如何使用 Flexbox 实现垂直分栏布局。具体步骤如下：
首先，我们需要创建一个容器 div，并设置它的属性
display:flex，这个属性是告诉浏览器这个容器使用 Flexbox 布局。.container { display: flex; }接着，我们需要设置每个项目的属性
flex，这个属性决定了每个项目在父容器中占据的空间比例。这里我们需要实现垂直分栏，所以我们只需要设置每个项目的flex:1，这样每个项目会占据相等的高度。.item { flex: 1; }我们还需要设置项目的高度，因为我们使用了 Flexbox 布局，所以高度需要用百分比来表示。这里我们设置每个项目的高度为 50%。
.item { flex: 1; height: 50%; }最后，我们还需要设置项目的背景颜色和一些样式。
.item { flex: 1; height: 50%; background-color: #f0f0f0; border: 1px solid #ddd; text-align: center; line-height: 40px; }
完整代码如下：
-- -------------------- ---- ------- --------- ----- ------ ------ ------ ---------------- ----------------- - ------------ ------- ---------------- ------------ - ---------- ------ ----------- ----- --- ------- - -------- -- ---------- ---- -------------------- -------- ---------- --- ----- ----- -------------- ------- --------------- ----- --- --------- ------- ------ ----- ------------------ ------ -------------------- ------ -------------------- ------- ------- -------
注意事项
使用 Flexbox 布局的时候需要注意以下几点：
display:flex属性只有在父容器中使用才会有效，而且所有的子元素都会成为 Flex 项目。flex属性有很多取值，常用的有flex:1，表示项目占据相同的空间；还有flex:auto，表示项目根据自身的宽度和高度自适应调节。- 使用 Flexbox 布局设置了高度之后，应该使用百分比来表示高度。
- 使用 Flexbox 布局实现的垂直分栏，每列的高度一定要相同，否则页面将出现错位的现象。
结论
使用 Flexbox 布局是一种比较现代化的布局方式，不仅可以实现垂直分栏，还可以实现很多其他复杂的布局方式。本文通过介绍 Flexbox 布局的基本概念和使用方法，并通过示例代码演示了如何使用 Flexbox 实现垂直分栏布局。相信读者们能够很容易地掌握这种布局方式，应用到实际项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f66213c5c563ced5846f43