CSS-Flexbox中的第一个孩子全角

如何在flexbox全角中设置第一个孩子,将所有其他孩子设置为flex:1(用于拆分空间)?

像这样:

enter image description here

Sajad asked 2020-01-14T11:28:48Z
2个解决方案
77 votes

您可以将<div class="container"> <div class="child">Child</div> <div class="child">Child</div> <div class="child">Child</div> </div>的宽度设置为100%,将其余的:not(:first-child)设置为flex: 1。要将它们放在多行上,请在容器上使用flex-wrap: wrap

<div class="container">
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
</div>
<div class="container">
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
</div>

TheYaXxE answered 2020-01-14T11:30:13Z
14 votes

为您的第一项添加<div class="flex"> <div class="flex-item"> Child </div> <div class="flex-item"> Child </div> <div class="flex-item"> Child </div> </div>。 其他则为flex: 1;

<div class="flex">
  <div class="flex-item">
    Child
  </div>
  <div class="flex-item">
    Child
  </div>
  <div class="flex-item">
    Child
  </div>
</div>
<div class="flex">
  <div class="flex-item">
    Child
  </div>
  <div class="flex-item">
    Child
  </div>
  <div class="flex-item">
    Child
  </div>
</div>

Vadim Ovchinnikov answered 2020-01-14T11:31:38Z
translate from https://stackoverflow.com:/questions/41789278/first-child-full-width-in-flexbox