withanimations翻译：Crazytechgeek原文：https://www.freecodecamp.org/...未经授权严禁转载一张图顶一千字——那动画呢？Flex无法通过文字或静态图像进行充分有效的解释。为了巩固您对flex的理解，我制作了这些动画。注意overflow:hidden行为类型是默认的，因为flex-wrap还没有设置。要获得更好的想法，您可以尝试此页面上的FlexLayoutEditor。默认情况下flex不会包装您的内容。它的工作方式很像溢出：隐藏。学习flex最先遇到的可能就是flex-wrap。FlexWrap让我们添加flex-wrap:wrap看看它如何改变弹性项目的行为。基本上，它只是扩展容器高度并包裹物品。注意：即使未指定容器的高度（自动/未设置），这仍然会发生。wrap当你有一些内容大小和数量未知的项目，并希望将它们全部显示在屏幕上时，这是一种常见的模式。项目的实际顺序可以用flex-direction:row-reverse反转。这可用于需要按从右到左的顺序阅读的内容。您可以将所有项目“浮动：右移”在与flex-end相同的行上。这与row-reverse不同，因为它保留了项目的顺序。对齐内容justify-content属性负责弹性项目的水平对齐。它看起来很像前面的示例...除了项目的顺序。flex-end在以下示例中(justify-content:center)，所有项目都会自然地聚集到父容器的中心-无论其宽度如何。类似于position:relative;保证金：自动。centerSpacebetween表示所有内部项之间都有空格：space-between下面这个好像和上面一模一样。那是因为它的内容同样是整个字母表。弹性项目越少，效果越明显。它们在角落项目的边距上有所不同。使用space-between属性（如上）的角落项目没有边距。使用space-around属性（如下），所有项目都具有相同的边距。space-around下面的动画是同一个例子，但中间元素更宽。space-around即使您已经看过上面的这些演示，您仍然需要在自己的环境中尝试flex才能真正理解布局。这就是我决定编写本教程的原因。这些动画受项目大小的限制。您尝试的结果可能因内容的具体情况而异。对齐内容上面的所有示例都涉及justify-content属性。但即使涉及自动换行，您也可以在flex中进行垂直对齐。属性justify-content（以上所有示例）和align-content（以下）采用完全相同的值。它们仅在两个不同的方向上对齐——相对于存储在flex容器中的项目垂直和水平。接下来探讨一下flex是如何处理垂直对齐的：align-content:space-evenly关于space-evenly的一些现象：Flex自动分配足够的垂直空间。项目行与相等的垂直边距空间对齐。当然，您仍然可以修改父项的高度，一切仍会正确排列。真实的应用场景在真实的布局中，你不会有一长串文本，你会使用一些独特的内容元素。到目前为止，我只是简要地演示了flex在动画中的工作原理。当谈到实际布局时，您可能希望对更少和更大的项目使用flex。就像真实网站上的那些一样。让我们来看看一些想法...均匀地使用space-evenly来对齐内容和对齐内容对一组具有5个正方形的项目有以下效果：奇怪的项目在弯曲时效果不佳框当使用响应区域时，首先要做的是确保尽可能保持项目的宽度相同。请注意，由于此示例中的项目数量(5)为奇数，因此不会产生您想要的响应速度。使用偶数可以解决这个微妙的问题。现在，考虑将相同的flex属性应用于偶数个项目：十多年来，在布局设计中将项目垂直居中一直是一个大问题。最后用flex解决了。（呃……你也可以用cssgrid来解决。)但在flex中，在两个维度中使用space-evenly值会自动调整内容，即使项目的高度是可变的：perfectverticalalignmentformultipleitemofdifferentheightsaboveisthemostusedresponseforthenext10years对公式flex的描述（你在开玩笑吗？）。如果您正在学习flex，您会发现这通常是最有用的一组flex属性。最后，以下动画演示了所有可能的值：flex-direction:row;证明内容：[值]；弹性方向：列；证明内容：[值]；使用这些类型的弹性项目。（你使用得越多，你就会越了解grid+flex。）不过flex-only布局并没有错。请务必明确指定元素的大小。如果不这样做，某些弹性缩放将无法正常工作。相应地使用最小宽度、最大宽度和宽度/高度。这些属性会对整体弹性可伸缩性产生影响。多于！希望你喜欢这篇文章。
