什么是 Flexbox 布局？
Flexbox 布局是一种用于页面布局的 CSS3 新特性。它提供了一种灵活的方式来排列、对齐和分布元素，可以使我们更轻松地实现复杂的布局。
Flexbox 布局的基本概念
在了解如何使用 Flexbox 布局实现文件夹结构布局之前，我们需要先了解一些基本概念。
Flex 容器
使用 Flexbox 布局的第一步是将一个容器标记为 Flex 容器。可以通过在容器的 CSS 样式中添加 display: flex 来实现。
.container {
display: flex;
}Flex 项目
Flex 容器中的每个子元素都被称为 Flex 项目。这些项目可以通过 Flex 容器的一些属性来控制它们的布局和行为。
主轴和交叉轴
Flexbox 布局的一个重要概念是主轴和交叉轴。主轴是 Flex 项目排列的方向，而交叉轴则是与主轴垂直的方向。
Flex 方向
Flexbox 布局可以有两个方向：水平和垂直。默认情况下，Flex 容器的方向是水平的。可以通过在容器的 CSS 样式中添加 flex-direction 属性来更改方向。
.container {
display: flex;
flex-direction: column;
}现在我们已经了解了 Flexbox 布局的基本概念，让我们来看看如何使用它来实现一个文件夹结构的布局。
HTML 结构
首先，我们需要一个包含文件和文件夹的 HTML 结构。我们可以使用一个无序列表来实现这个结构。
-- -------------------- ---- -------
--- -------------------------
--- ---------------
-- --------- ---------------
------ -
----
-------- ------
-------- ------
-------- ------
-----
-----
--- -------------
-- --------- -------------
---- -
-----
--- ---------------
-- --------- ---------------
------ -
----
-------- ------
-------- ------
-----
-----
-----CSS 样式
接下来，我们需要为 Flex 容器和 Flex 项目添加一些 CSS 样式。
首先，我们将 .folder-structure 标记为一个 Flex 容器，并将其方向设置为垂直方向。我们还将交叉轴对齐设置为 stretch，这样所有的 Flex 项目都可以填满容器的高度。
.folder-structure {
display: flex;
flex-direction: column;
align-items: stretch;
}然后，我们将 .folder 和 .file 标记为 Flex 项目，并将它们的对齐方式设置为 center，这样它们就会在主轴上居中对齐。
.folder, .file {
display: flex;
justify-content: center;
align-items: center;
}最后，我们将 .folder ul 标记为一个嵌套的 Flex 容器，并将其方向设置为水平方向。我们还将 .folder ul 的外边距设置为 0，这样它就会与 .folder 的边框对齐。
.folder ul {
display: flex;
flex-direction: row;
margin: 0;
}示例代码
完整的 HTML 和 CSS 代码如下所示：
-- -------------------- ---- -------
--- -------------------------
--- ---------------
-- --------- ---------------
------ -
----
-------- ------
-------- ------
-------- ------
-----
-----
--- -------------
-- --------- -------------
---- -
-----
--- ---------------
-- --------- ---------------
------ -
----
-------- ------
-------- ------
-----
-----
-----
-------
----------------- -
-------- -----
--------------- -------
------------ --------
-
-------- ----- -
-------- -----
---------------- -------
------------ -------
-
------- -- -
-------- -----
--------------- ----
------- --
-
--------总结
Flexbox 布局是一种非常强大的工具，可以帮助我们轻松地实现复杂的页面布局。通过掌握一些基本概念和技巧，我们可以使用 Flexbox 布局来实现各种布局需求，包括文件夹结构布局。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65bd1fe7add4f0e0ff6cb67f