Flex 布局是一种用于创建灵活的布局的 CSS 样式。它允许元素在页面上沿着水平或垂直方向排列，并能够自动地调整尺寸以适应其容器的大小。

Flex 布局由以下几个部分组成： 容器：包含 flex 元素的元素

flex 元素：被包含在容器中的元素

轴：flex 布局中的两个方向，即水平轴（主轴）和垂直轴（侧轴）

要使用 flex 布局，需要在容器元素上设置 display: flex 样式。这会使该元素成为 flex 容器，并使其中的所有元素成为 flex 元素。

Flex 布局的默认样式是flex 元素在容器的水平轴上沿着一行排列，并在侧轴顶部对齐。并且可以使用一些属性来控制 flex 布局的方向和对齐方式。

主轴方向

左对齐（默认）

.box {
            justify-content: flex-start;
        }

两端对齐

 .box {
            justify-content: space-between;
        }

弹性盒子四周间距

.box {
            justify-content: space-around;
        }

弹性盒子左右间距相等

.box {
            justify-content: space-evenly;
        }

居中

.box {
            justify-content: center;
        }

右对齐

.box {
            justify-content: flex-end;
        }

侧轴方向

延伸（默认）-弹性盒子没有高度的情况下高度会自动延伸

.box {
            align-items: stretch;
        }

垂直居中

.box {
            align-items: center;
        }