使最长的弹性项目设置列的宽度
我有多个div。 在每个我有label和span 。
我希望标签的宽度由最长的标签设置，并且跨度都将始于同一点。
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
}<article>
<div class="container">
<label class="key">text</label>
<span class="value">text</span>
</div>
</article>试试这个小提琴，
我将display:flex更改为'table-row'以获得.container相同宽度，然后使用此CSS
.container{
display:table-row;
}
label{
display: table-cell;
border:solid 1px red;
}
span{
display: table-cell;
border:solid 1px blue;
}
如果您想为此布局使用flexbox，则需要重新构建HTML。
Flex项目可以共享相同的高度/宽度，但只有它们是兄弟姐妹。
article {
display: flex;
}
.container {
display: flex;
flex-direction: column;
}
/* non-essential decorative styles */
.key { background-color: aqua; }
.value { background-color: pink; }
.container > * { margin: 2px; padding: 2px; border: 1px solid #999; }<article>
<div class="container">
<label class="key">label label label label</label>
<label class="key">label</label>
<label class="key">label</label>
<label class="key">label</label>
</div>
<div class="container">
<span class="value">span span span span</span>
<span class="value">span</span>
<span class="value">span</span>
<span class="value">span</span>
</div>
</article> 你可以简单地使用display: table ：
HTML：
<article>
<div class="container">
<label class="key">text</label>
<span class="value">text</span>
</div>
<div class="container">
<label class="key">texttexttexttext</label>
<span class="value">longgggg text</span>
</div>
<div class="container">
<label class="key">tetexttextxt</label>
<span class="value">test text</span>
</div>
<div class="container">
<label class="key">texttext</label>
<span class="value">text</span>
</div>
</article>
CSS：
.article {
display: table;
}
.container {
display: table-row;
}
label {
display: table-cell;
background-color: aqua;
}
span {
display: table-cell;
background-color: orange;
}
小提琴
链接地址: http://www.djcxy.com/p/90081.html