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

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

flexbox css

Yairopro · 技术社区 · 8 年前

这个问题已经有了答案:

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 回复 | 直到 8 年前

Bikas Finn-Dev 8 年前

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>

DrCord 8 年前

您正在使用 justify-content: center ,因此根据屏幕/视区大小,开始和结束元素将被切断。

VSM 8 年前

去除 justify-content: center; 。它总是使您的内容集中在视图端口内。谢谢。

DrCord 8 年前

只需移除 justify-content: center ,由于内容在视区中心对齐,因此当内容大于视区时,必须切断边。

推荐文章

JWWalker · CSS的resize属性可以用来调整flex列宽吗?

1 年前

Sidaqpreet Singh · 为什么当设置为包裹时,柔性包裹会导致横轴出现间隙?

1 年前

rifx · 在kendoTreeViewNodeTemplate(Angular)中设置数据项的样式

2 年前

Fox L · 每行4个项目,但如果少于4个项目则留空?

2 年前

Zack Riquelme · 如何使用CSS将HTML的<header>中的<a>和<nav>内容在同一个父框中左右拆分?

2 年前

JobHunter69 · 为什么这个组件不填充整个宽度?

2 年前

Vasantha Kalyani · Flexbox Html CSS设置位置问题[重复]

2 年前

coder · 边界半径不适用于容器元素

2 年前

user9026 · 项目登录页面(freecodecamp)定价设计

2 年前

Bo Thompson · 根据需要调整柔性物品的高度,但不得超过容器

2 年前