代码之家 › 专栏 › 技术社区 › Joel Hoelting

为什么flex div是父div的100%宽度?

flexbox css3 css html

Joel Hoelting · 技术社区 · 6 年前

我不明白为什么flex div占用了它的父元素100%的宽度。请看以下片段:

#wrapper {
  width: 100%;
  height: 100px;
  background: green;
}

#flex {
  color: white;
  display: flex;
  flex-direction: row;
  background: blue;
}

<div id="wrapper">
   <div id="flex">
     <div>Item</div>
     <div>Item</div>
     <div>Item</div>
     <div>Item</div>
   </div>
</div>

为什么flex div会扩展到父级的100%宽度?有没有办法让flex div只和它里面的内容一样宽?

感谢您的帮助, 谢谢

1 回复 | 直到 6 年前

Michael Benjamin William Falcon 6 年前

你的 #flex display: flex 应用。这是块级命令(例如 display: block )其中, by design ,占据父级的整个宽度。使用 display: inline-flex 相反。

推荐文章

Luca Phillips · 当表是div flex的子级时,它有巨大的空间

2 年前

Nishit Agrawal · Flexbox-将第三项与第二项对齐

2 年前

alan · 有没有办法向flexbox图像添加链接?

2 年前

Gary · CSS在弹性方框布局中用句点字符串填充段落剩余部分的方法?

2 年前

n1234 · Flexbox-图像和内容

6 年前

nCardot · 为什么是!h1元素媒体查询工作所需的重要信息?[副本]

6 年前

Adam Olsson · 在中心CSS中对齐单个列表项

6 年前

London804 · 我是否可以使设置为对齐内容的元素:换行时间距向右对齐?

6 年前

user3137124 · 当“flex direction”为“column”时,如何将div与顶部对齐?[副本]

6 年前

AJ- · 无法垂直对齐文本-angularJS+bootstrap+flexbox

6 年前