在前端开发中，经常需要实现树形结构的布局。而用传统的 CSS 规则实现树形结构会比较繁琐和复杂，难以实现响应式布局。但是，通过使用 CSS Flexbox，可以轻松地实现树形结构，且支持响应式布局。
什么是 CSS Flexbox
CSS Flexbox 是一种布局模式，其名称为"Flex布局"。它可以将容器元素内的子元素自动排列，根据不同屏幕尺寸和设备方向自适应布局。
在 CSS Flexbox 布局中，容器元素被设置为display:flex或者display:inline-flex。容器内的子元素被称为"flex items"，它们被布置在主轴和交叉轴上。
实现树形结构
为了实现树形结构，我们需要考虑以下两个问题：
- 如何设置容器元素和子元素的样式；
- 如何使用 CSS Flexbox 布局来实现树形结构。
设置样式
首先，我们需要对容器元素和子元素设置样式。对于容器元素，我们需要设置以下属性：
.container {
display: flex;
flex-direction: column;
}上面的代码用于设置容器元素为 Flexbox 布局，同时设置主轴方向为列（默认为行）。这将使得我们的子元素在垂直方向上自动排列。
对于子元素，我们需要设置以下属性：
.tree-node {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px;
border-bottom: 1px solid #ccc;
}上面的代码用于设置子元素为 Flexbox 布局，并在子元素之间设置空间分布，同时为所有子元素添加统一的样式。在本例中，我们使用 padding 和 border-bottom 属性为每个子元素添加样式，并使用 align-items 和 justify-content 属性将子元素垂直居中和水平对齐。
使用 CSS Flexbox 实现树形结构
接下来，我们将使用 CSS Flexbox 布局来实现树形结构。使用以下示例代码：
-- -------------------- ---- -------
---- ------------------
---- ------------------
---------- --------
------
---- ------------------
---------- --------
---- ------------------
---- ------------------
---------- ----------
------
---- ------------------
---------- ----------
---- ------------------
---- ------------------
---------- ------------
------
---- ------------------
---------- ------------
------
------
------
------
------
---- ------------------
---------- --------
------
------使用上面的代码，我们可以实现一个简单的树形结构。在这个结构中，我们嵌套了多个容器元素和子元素，并为每个子元素设置唯一的类名以显示层次结构。
然后，我们可以使用 CSS Flexbox 布局将元素自动排列到其父容器中。使用以下 CSS 代码：
-- -------------------- ---- ------- ---------- - -------- ----- --------------- ------- - ---------- - -------- ----- ------------ ------- ---------------- -------------- -------- ----- -------------- --- ----- ----- - ---------- ---------- - ------------ ----- -
在上面的代码中，我们为所有的容器元素设置了左侧的外边距，并通过嵌套容器元素将子元素放置在合适的位置。使用 align-items 和 justify-content 属性将所有的文本和图标垂直居中和水平对齐，并使用 padding 和 border-bottom 属性为每个子元素添加了样式。
总结
CSS Flexbox 是一种强大的布局工具，可以使树形结构的实现变得简便和容易。通过设置容器元素和子元素的样式以及使用 CSS Flexbox 布局，可以轻松地实现树形结构，并支持响应式布局。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6486d71848841e989456b271