CSS开发教程
照片：KOBU AgencyonUnsplash
- Flexbox是CSS3中的一个新模块，它使得元素之间可以很容易地以不同的方向和顺序对齐，并且在必要时还可以改变不对齐的方式，例如用于响应式设计。
- 即使你对这些元素的尺寸没有概念，这也能完美地发挥作用，因为
- Flexbox背后的主要理念是让容器有能力扩展和收缩元素，以最好地利用可用空间。
- 因此，有了Flexbox，你可以轻松地用更少、更可读、更合理的代码来取代浮动布局。也正因为如此。
- Flexbox完全改变了我们构建布局的方式，尤其是一维布局，因为这正是Flexbox真正的优势所在。
- 对于二维布局，实际上有更好的构建方式。例如，使用CSS网格布局。
由于上述所有原因，Flexbox是CSS的一场真正的革命。它使我们作为CSS开发者的生活更加轻松。这就是为什么在这篇文章中，我们要学习Flexbox的关键基础知识。
Flexbox的概念
在你我使用CSS Flexbox之前，并没有太多的东西需要了解。我们需要知道的是。
- 我们使用 Flexbox 的元素被称为Flex 容器，为了创建一个 Flex 容器，我们所要做的就是将其显示属性设置为 Flex。我们也可以将其设置为flex-inline，这样就可以创建一个Flex容器，并将其设置为像一个内联元素一样。
2.Flex容器的所有直接子女都被称为Flex项目
3.3. Flex项目设置的方向被称为主轴，箭头所示为从左到右。那么另一条垂直的轴就简单地称为十字轴。我们需要记住这些轴的名称，因为我们可以改变主轴的方向，还因为沿主轴和横轴有不同的方式来对齐元素。让我们尽量不要忘记这些，以便我们能够充分理解不同的Flexbox相关属性是如何工作的。这就是我们的下一个主题
不同的Flexbox属性如何工作
- 因此，Flexbox规范定义了几个属性，我们在Flex容器上使用这些属性，以定位和对齐所有的Flex项目。
- 还有一些其他属性，我们直接在Flex项目本身上使用。目前，这里对所有这些属性进行了简要的总结，以便你我能够了解Flexbox是如何工作的，有多少个属性，它们是如何工作的。
因此，一个Flex容器的属性如下。
- flex-direction。它规定了主轴的方向。下面是该属性名称的图片，以及它可能采取的值，其中第一个是初始值。那是默认值。所以方向可以走成一行，这就是你在下面的图片中看到的默认方向。但它也可以向相反的方向发展，甚至向上或向下，这将形成一个列。当我们在实践中把这些概念可视化时，会变得更容易。但现在，我们只需要让自己熟悉这个属性并意识到这些属性的存在。
2.flex-wrap：这个简单的定义是，如果flex容器中没有足够的空间，flex项目是否应该换成新行。
3.justify-content：这定义了柔性项目将如何沿主轴线对齐。所以知道主轴在哪里是超级重要的。
4. align-items。这个属性与justify-content非常相似，不同的是，这个属性定义了Flex项目如何沿横轴而不是主轴对齐。因此，align-items通常与justify-content一起使用。这两个属性可能是所有属性中最重要的Flexbox属性。
5. align-content。这只适用于有多于一行的Flex项目的情况。在这种情况下，如果有一些空的空间，align-content控制行如何沿横轴对齐。
别担心，我们将在下一篇文章中研究这方面的代码。
那么，关于柔性项目的属性。
- align-self。它与对齐项目非常相似，但只针对一个单独的Flex项目。因此，我们可以想象一下，我们把对齐项设置为居中，但我们希望其中一个项目在底部对齐。我们可以用align-self来实现。
2.顺序。这定义了一个特定的Flex项目应该出现在容器内的顺序。这在重新安排项目顺序时非常有帮助，例如在小屏幕上。
3.最后，我们有3个属性，它们共同帮助Flexbox决定一个Flex项目的宽度。它们是flex-grow、flex-shrink和flex-base。
- flex-grow。通过它，我们可以定义一个项目可以增长多少
- 弹性收缩。通过它，我们定义一个项目可以收缩多少。
- 弹性基础。通过这个，我们可以定义一个项目的基本宽度。
上述属性还有一个简略的版本，它被简单地称为 弹性*.这就是我们要使用的，因为它是常见的做法。*
注意：为了启动Flexbox，你需要将容器的显示值设置为flex。就是说。
display: flex。
请不要忘记。
总结
在这篇文章中，我们探讨了使用CSS Flexbox所必须注意的事项。在下一篇文章中，我们将把刚刚学到的东西付诸行动。
