代码之家 › 专栏 › 技术社区 › Yairopro

为什么flexbox的开头是隐藏的?如何解决以项目为中心的问题?[副本]

flexbox css

Yairopro · 技术社区 · 7 年前

这个问题已经有了答案:

How to use safe center with flexbox? 1个答案
How to center image when it's smaller than parent and put in top left corner when it's bigger? 2个答案

在下面的片段中, 您将无法看到flexbox的第一个项目 .
为什么? 如何解决这个问题,以便用户可以水平滚动查看所有项目?

<div style="display: flex; justify-content: center; overflow: auto; padding: 30px 0">
  <div style="padding: 0 15px">AAAAAA</div>
  <div style="padding: 0 15px">BBBBBB</div>
  <div style="padding: 0 15px">CCCCCC</div>
  <div style="padding: 0 15px">DDDDDDD</div>
  <div style="padding: 0 15px">EEEEEEE</div>
  <div style="padding: 0 15px">FFFFFFF</div>
  <div style="padding: 0 15px">GGGGGGG</div>
  <div style="padding: 0 15px">HHHHHHH</div>
  <div style="padding: 0 15px">iiiiiii</div>
  <div style="padding: 0 15px">JJJJJJJ</div>
  <div style="padding: 0 15px">KKKKKKK</div>
  <div style="padding: 0 15px">LLLLLLL</div>
  <div style="padding: 0 15px">MMMMMMM</div>
  <div style="padding: 0 15px">OOOOOOO</div>
</div>

<div style="text-align: center">Scroll horizontally the letters above.</div>

4 回复 | 直到 7 年前

Bikas Finn-Dev 7 年前

flex尝试在同一行中容纳每个项目。如果要保持项目居中,请添加 flex-wrap: wrap 到容器。如果你想把它们放在同一行,尽管你必须改变 justify-content 到 flex-start . 下面是 flex-wrap 解决方案。

<div style="display: flex; flex-wrap: wrap; justify-content: center; overflow: auto; padding: 30px 0">
  <div style="padding: 0 15px">AAAAAA</div>
  <div style="padding: 0 15px">BBBBBB</div>
  <div style="padding: 0 15px">CCCCCC</div>
  <div style="padding: 0 15px">DDDDDDD</div>
  <div style="padding: 0 15px">EEEEEEE</div>
  <div style="padding: 0 15px">FFFFFFF</div>
  <div style="padding: 0 15px">GGGGGGG</div>
  <div style="padding: 0 15px">HHHHHHH</div>
  <div style="padding: 0 15px">iiiiiii</div>
  <div style="padding: 0 15px">JJJJJJJ</div>
  <div style="padding: 0 15px">KKKKKKK</div>
  <div style="padding: 0 15px">LLLLLLL</div>
  <div style="padding: 0 15px">MMMMMMM</div>
  <div style="padding: 0 15px">OOOOOOO</div>
</div>

<div style="text-align: center">Scroll horizontally the letters above.</div>