Flexbox居中项目导致重叠内容

Question

当我尝试使用flexbox来居中项目时，会出现一些重叠的内容和错位。

https://jsfiddle.net/a9oc6gL8/1/

select min(length), max(length) from movies

Answer 1

为了解释，我已经绘制了一些额外的矩形来证明出了什么问题。

左上角和右上角的列一样宽，与左下角和右下角的栏一样宽，但比例不同。

现在我可以解释如何解决这个问题，但我注意到你在整个文档中犯了很多错误。我认为，尝试在基础知识方面做得更好一点比尝试获取弹性框架更重要。

除此之外。我创建了一个显示固定情况的Fiddle。我在没有flexbox的情况下对其进行了全面检修。

我所做的是创建两个正好50％宽的列。它们都漂浮到左边。像这样，左侧和右侧的文本总是在同一个位置。我已经清理了代码（您正在切换ul和li，使用不必要的类，您使用简单的＆符号（&），而您应该键入&当创建一个......有很多错误）。也。 ＆＃39; 01＆＃39;＆＃39; 02＆＃39;现在可以使用CSS自动生成等。

该文件整体上已发生变化。我建议调查它，并试图了解每行代码会发生什么。它肯定会教你一两件事。

希望这有帮助

Answer 2

我简化了你的代码。通过这些调整，您所需的对齐结合在一起：

<强> CSS

.footer_3 {
    display: flex;
    width: 75%;
    margin: 220px auto 50px;
}

.footer_4 {
    display: flex;
    width: 75%;
    margin: 0 auto;
}

.about_description {
    width: 100%;
}

DEMO