我有一种情况,我想让flexbox的孩子并排。
我希望子级1的宽度等于其内容的宽度,然后让子级2占用父级的剩余宽度。
我似乎无法使这项工作
这是我到目前为止的
.flex {
display: flex;
}
.flex-child {
flex-basis: 0;
flex-grow: 1;
}
.flex-1 {
flex-basis: content;
background: red;
}
.flex-2 {
background: green;
}
<div class="flex">
<div class="flex-child flex-1">
Child 1, Child 1, Child 1
</div>
<div class="flex-child flex-2">
Child 2, Child 2, Child 2
<div>
</div>
最佳答案
只需将flex-grow
设置为第二个孩子
.flex {
display: flex;
}
.flex-1 {
background: red;
}
.flex-2 {
flex-grow: 1;
background: green;
}
<div class="flex">
<div class="flex-child flex-1">
Child 1, Child 1, Child 1
</div>
<div class="flex-child flex-2">
Child 2, Child 2, Child 2
<div>
</div>
关于css - Flexbox:子级1如何具有其内容的宽度,子级2如何填充其余宽度,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/51045040/