flexbox是CSS中非常常见的一个名词，很多前端新手可能从各种各样别人的代码中（AI、开源）都看到过这种写法display: flex，但很少有人清楚地了解这个样式的定义、场景，本文将通过一些简单的例子（源自MDN文档）给大家介绍flex这一布局的技巧
首先让我们写一个demo代码，我们这样简单布局
<section>
<article>
<article>
<article>
<section>
效果如图所示：
可以看到，默认状态下，每个article都以行的形式在section中以列铺开，让我们给section加上display: flex
马上article就表现得如同block一样，并且按行铺开，让我们多加几个article：
新增之后，依然是block，按row排列，在这里我们把具有flex属性的父元素称为flex容器（section），其中的元素称为flex项（article）
flex容器可以通过flex-direction: column来更改flex项的排列方向（行或列）
在刚才的图中，我们可以看到，flex项过多时，会导致所有元素都挤在一行，非常不美观，我们可以通过给flex容器加上flex-wrap: wrap，给flex元素加上flex: 200px，以此让flex项自动分行分列。
但注意，这里默认会把行或列填满
flex具有一个动态尺寸的特性
我们把flex: 1 200px;这样的属性给article，这意味着每个article在行或列上先分配200px的空间，剩余空间每个article分1份（结果是每个article占空间相等）
通过给指定第k个元素赋css，我们可以实现一些特殊的效果，例如：article:nth-of-type(3)，我们把第三个article的flex写为5，这意味着在一行中，它与其余元素对剩余空间的分配如图所示：
除此之外，flex容器还有两个极为实用的属性：
- align-items（控制 flex 项在交叉轴上的位置）
- justify-content（控制 flex 项在主轴上的位置）
在这里，主轴指的是flex-direction设定的方向（row/column），交叉轴则是垂直于主轴的方向
这两个属性都可以通过flex-start、center、flex-end来控制flex项在各个轴上的位置（开头、结尾、居中）
具体用法是：
align-items
flex-start：Flex 项在交叉轴的起点对齐。center：Flex 项在交叉轴的中间对齐。flex-end：Flex 项在交叉轴的终点对齐。stretch（默认值）：Flex 项在交叉轴上拉伸以填满整个容器的高度（或宽度，取决于主轴方向）。baseline：Flex 项在交叉轴上沿基线对齐。
justify-content
flex-start（默认值）：Flex 项在主轴的起点对齐。center：Flex 项在主轴的中间对齐。flex-end：Flex 项在主轴的终点对齐。space-between：Flex 项在主轴上均匀分布，第一个 Flex 项在起点，最后一个 Flex 项在终点。space-around：Flex 项在主轴上均匀分布，每个 Flex 项周围有相等的空间。space-evenly：Flex 项在主轴上均匀分布，每个 Flex 项之间的空间相等。
总结一下，flex主要提供了一个自动布局的方法，其核心是、flex容器和flex项、主轴和交叉轴，控制好他们我们也就掌握了一个灵活的布局，在反应式中非常实用
