我有一种情况,我想让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/

10-12 12:49
查看更多