Question

我需要创建两个带有子项的flexbox容器，第二个容器具有第一个子项的子集，但是我希望它们的宽度与上面的子句对齐。子项使用width和flex进行调整，但是由于第二个容器的子项较少，因此它们的实际宽度不匹配。看一下：https://codepen.io/anon/pen/LBgKmR

我不能只将更多项目放入第二个容器中以填充html。我需要像设置flex-container的属性那样声明它们的子级宽度。

有这种可能吗？

这是codepen的内容：

    .flex-container {
      padding: 0;
      margin: 0;
      list-style: none;
      
      display: flex;
      width: 100%;
    }
    
    .item {
      padding: 5px;
      height: 150px;
      margin-top: 10px;
      
      line-height: 150px;
      color: white;
      font-weight: bold;
      font-size: 3em;
      text-align: center;
    }
    
    .flex-item {
      background: tomato;
      flex: 1;
    }

    <ul class="flex-container">
      <li class="item flex-item">1</li>
      <li class="item flex-item">2</li>
      <li class="item" style="background-color: green; width: 50px">3</li>
      <li class="item flex-item">4</li>
      <li class="item flex-item">5</li>
      <li class="item flex-item">6</li>
    </ul>
    
    <ul class="flex-container">
      <li class="item flex-item">a</li>
      <li class="item flex-item">b</li>
      <li class="item" style="background-color: green; width: 50px">c</li>
      <li class="item flex-item">d</li>
    </ul>

Answer 1

我真正想要和需要的是网格布局的grid-template-columns，这是父级声明子级宽度的一种方法。

对齐两个flexbox容器的子级

1 个答案: