css - Flexbox居中项导致内容重叠

当我尝试使用flexbox将项目居中时，会有一些重叠的内容和未对齐的情况。



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

.footer_3 {
  position: relative;
  display: flex;
  align-items: top;
  justify-content: center;
  top: 220px;
     padding-bottom:100px;
}

.footer_4 {
  position: relative;
  display: flex;
  align-items: top;
  justify-content: center;
  top: 190px;
}

最佳答案

为了说明，我绘制了一些额外的矩形来演示出了什么问题。



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

现在，我可以解释如何解决此问题，但是我注意到您在整个文档中一直犯很多错误。我认为，您应该尝试在基础知识上有所提高，比尝试掌握flexbox更重要。

除此之外。我创建了一个显示固定情况的Fiddle。我已经对它进行了彻底的大修，没有flexbox。

我所做的是创建两个宽度都恰好为50％的列。它们都向左浮动。这样，左侧和右侧的文本始终位于同一位置。我已经清理了代码（使用不必要的类切换了ul和li，使用了普通的＆符号（&），而在创建一个时应键入& ...有很多错误）。也。现在可以使用CSS自动生成“ 01”，“ 02”等。

整个文档已更改。我建议对其进行研究，并尝试理解每一行代码会发生什么。它一定会教你一两件事。

希望这可以帮助

关于css - Flexbox居中项导致内容重叠，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34802637/