随着网页布局的不断发展，CSS的布局方案也不断更新迭代，其中Flexbox布局就成为了一个备受关注的布局方式。它可以轻松实现各种网页布局，今天我们就通过一个例子来学习如何使用Flexbox来实现分割线并适应父容器大小。
Flexbox布局
Flexbox是一种基于flex容器和flex项目组成的布局方式。Flex容器时一个包含所有flex项的父元素，用 display:flex 或 display:inline-flex 属性来定义。它的子元素是flex项目，项目的特性取决于它们在flex容器中的定位方式。
Flexbox的特性有很多，例如让容器和项目的尺寸自适应，可以轻松实现响应式布局等。好了，现在让我们开始实现分割线吧。
实现分割线
实现效果
在实现分割线之前，先来看看我们要实现的效果：
HTML结构
HTML结构如下：
<div class="wrapper">
<div class="left"></div>
<div class="line"></div>
<div class="right"></div>
</div>我们要实现的是左右两侧的div之间有一条分割线。
CSS样式
接下来，我们通过Flexbox布局来实现这个分割线效果。
-- -------------------- ---- -------
-------- -
-------- -----
---------------- --------------
------------ -------
------- ------
-
------
------ -
------ ----
------- -----
-
----- -
------- ----
------ ----
----------------- -----
-首先，我们定义了wrapper容器，让它的display属性设置为flex，表示使用Flexbox布局方式。同时，我们通过justify-content属性来让左右两边的元素分别在wrapper容器的两端，并通过align-items属性来让它们在容器的垂直中心对齐。
接着，我们分别定义了左右两个元素的宽度为40%，高度为100%。另外我们在line元素中定义了线条的高度为80%，宽度为1px，并且背景色为黑色。
总结
Flexbox布局可以帮助我们快速实现各种网页布局。在实现分割线的例子中，我们通过Flexbox布局来让元素在容器内分布，并通过设置元素属性的值来实现分割线效果。
希望通过这个例子，能够帮助大家更好地了解Flexbox布局的基本用法和特性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647c67e8968c7c53b0775f73