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

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

flexbox css html

-2

JobHunter69 · 技术社区 · 1 年前

我很困惑为什么第一个按钮没有填满这里的整个宽度:

<div style="display:flex;">
  <button style="width:100%;"> </button>
  <button style="flex-shrink: 0;"> </button>
  <button> </button>
</div>

为什么flexbox会中断宽度?

3 回复 | 直到 1 年前

junowoz 1 年前

由于flexbox如何分配空间,第一个按钮不会填满整个宽度。默认情况下,flex项目具有 flex-shrink: 1 ,让它们缩小。当你设置 width: 100% 在第一个按钮上,它最初会占用所有空间,但随后flexbox会重新分配空间以容纳其他按钮。

David 1 年前

它通过其flex容器填充了可用的整个宽度,这必须为容器中的剩余项目留出空间。

如果你希望这些物品能包装好, the default value for flex-wrap when not specified is nowrap 。您可以设置自定义值以允许项目换行:

<div style="display:flex;flex-wrap:wrap;">
  <button style="width:100%;"> </button>
  <button style="flex-shrink: 0;"> </button>
  <button> </button>
</div>

Michael Benjamin William Falcon 1 年前

确实如此。正如您的代码片段所反映的那样。

<div style="display:flex; height: 50px;">
  <button style="width:100%;"> </button>
  <button style="flex-shrink: 0;"> </button>
  <button> </button>
</div>

但是,如果你希望两个兄弟按钮缩小到零,那么你必须删除按钮元素上的默认填充和边框。

<div style="display:flex; height: 50px">
  <button style="width:100%;"> </button>
  <button style="padding: 0; border: 0;"> </button>
  <button style="padding: 0; border: 0;"> </button>
</div>

推荐文章

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

1 年前

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

1 年前

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

1 年前

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

1 年前

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

1 年前

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

1 年前

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

1 年前

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

1 年前

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

1 年前

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

1 年前