[英]CSS: What are the behavior rules for a "width: auto" container with inline-flex?
I was trying to create a list / table view with dynamic width using flexbox, and encountered a behavior I couldn't really wrap my head around.我试图使用 flexbox 创建一个具有动态宽度的列表/表格视图,但遇到了一个我无法真正理解的行为。 The result I'm trying to achieve is a width that fits the content of the list, at its' widest point.我试图实现的结果是一个适合列表内容的宽度,在它的最宽点。
.main { width: auto; background: rgb(233, 148, 148); display: inline-flex; flex-wrap: wrap; } .container { display: flex; width: 100%; } .label, .value { flex: 1; padding: 4px; } .label { text-align: end; border-right: 2px solid red; } .value { text-align: start; }
<div> <div class="main"> <div class="container"> <div class="label">Some Label</div> <div class="value">Some value</div> </div> <div class="container"> <div class="label">Some label 2</div> <div class="value">Other val</div> </div> <div class="container"> <div class="label">Third label</div> <div class="value"> <div>N/A</div> </div> </div> </div> </div>
What it boils down to, is that the width seems to be determined by the total characters count, and not the widest point, as I would expect.归结起来,宽度似乎由总字符数决定,而不是最宽的点,正如我所期望的。 You can edit the HTML and remove the N/A, for example, and the width will decrease.例如,您可以编辑 HTML 并删除 N/A,宽度将减小。
When I switch to display: inline-block
with white-space: nowrap
, the width is as expected, but the "columns" are not aligned.当我切换到display: inline-block
with white-space: nowrap
,宽度符合预期,但“列”未对齐。
.main { width: auto; background: rgb(233, 148, 148); display: inline-block; white-space: nowrap; } .container { display: flex; width: 100%; } .label, .value { flex: 1; padding: 4px; } .label { text-align: end; border-right: 2px solid red; } .value { text-align: start; }
<div> <div class="main"> <div class="container"> <div class="label">Some Label</div> <div class="value">Some value</div> </div> <div class="container"> <div class="label">Some label 2</div> <div class="value">Other val</div> </div> <div class="container"> <div class="label">Third label</div> <div class="value"> <div>N/A</div> </div> </div> </div> </div>
What causes the large width to occur when the display is inline-flex
?是什么导致显示为inline-flex
时出现大宽度? Is there a way to get the behavior I'm trying to achieve?有没有办法获得我想要实现的行为? I know it can probably be resolved with display: grid
, but I'm looking for a simpler solution.我知道它可能可以通过display: grid
解决,但我正在寻找一个更简单的解决方案。
I know it can probably be resolved with display: grid, but I'm looking for a simpler solution.我知道它可能可以通过 display: grid 解决,但我正在寻找一个更简单的解决方案。
It might be difficult if you do not handle the grid-layout fine enough yet, but it looks not that much complicated if you use the grid system ;)如果您还没有足够精细地处理网格布局,这可能会很困难,但是如果您使用网格系统,它看起来并没有那么复杂;)
For the width, look at max-content
.对于宽度,请查看max-content
。
simple example:简单的例子:
.main { width: max-content; background: rgb(233, 148, 148); } .container { display: grid; grid-template-columns: repeat(2, 1fr); } .label, .value { padding: 4px; } .label { text-align: end; border-right: 2px solid red; } .value { text-align: start; }
<div> <div class="main"> <div class="container"> <div class="label">Some Label</div> <div class="value">Some value</div> </div> <div class="container"> <div class="label">Some label 2</div> <div class="value">Other val</div> </div> <div class="container"> <div class="label">Third label</div> <div class="value"> <div>N/A</div> </div> </div> </div> </div>
In the past ,before flex
& grid
, display
would use the table-layout.过去,在flex
& grid
之前, display
会使用 table-layout。
.main { display:table; background: rgb(233, 148, 148); } .container { display: table-row; } .label, .value { padding: 4px; display:table-cell; } .label { text-align: end; border-right: 2px solid red; } .value { text-align: start; }
<div> <div class="main"> <div class="container"> <div class="label">Some Label</div> <div class="value">Some value</div> </div> <div class="container"> <div class="label">Some label 2</div> <div class="value">Other val</div> </div> <div class="container"> <div class="label">Third label</div> <div class="value"> <div>N/A</div> </div> </div> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.