具有两列的 Flex 容器；第二列有四行

Question

我很难在 flex 中显示以下布局。我有 5 个盒子，我想将我的容器分成两部分，一个盒子垂直显示，另外 4 个垂直显示。

这是我的 CSS：

 .trades, .trade-panel {
    flex: 1;
 }
.layout-4-5 {
    flex-direction: column;
}
.layout-4-5 > div {
    width: 50%;
}

然后我将第四个或最后一个孩子的基础设置为 100%。

 .layout-4-5 > div:nth-child(1) {
    flex-basis: 100%;
}

这是我的 HTML

 <div class="trades layout-4-5">
  <!--trade-panel are my individual boxes --->
  <div class="trade-panel">
    </div>

</div>

上面水平打印我的布局。考虑到我的 flex-direction 是 column 而我的第一个孩子或盒子有 100% 的基础，这不应该打印我想要的吗？请提供任何帮助，我们将不胜感激。

注意：由于框的大小相同，所以包含其他四个框的列应该更长，只要它们按照上面的排列就可以了。 tq

原文由 Nuru Salihu 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我对您的问题或代码并不完全清楚。但这是一个通用的解决方案：

 flex-container-1 {
    display: flex;                   /* establish flex container */
    flex-direction: row;             /* flex items will align horizontally */
    justify-content: center;         /* center flex items horizontally */
    align-items: center;             /* center flex items vertically */

    /* for demo purposes only */
    height: 250px;
    width: 400px;
    border: 1px solid #777;
    background-color: lightgreen;
}

flex-container-1 > flex-item {
    height: 90%;
    flex: 0 0 45%;                   /* <flex-grow> <flex-shrink> <flex-basis> */
    margin-right: 8px;               /* a bit of space between the centered items */
    border: 1px dashed #333;
    background-color: yellow;
}

flex-container-2 {
    height: 90%;
    flex: 0 0 45%;
    display: flex;                   /* flex item is now also flex container */
    flex-direction: column;          /* items will stack vertically */
    justify-content: space-between;  /* align items vertically */
}

flex-container-2 > flex-item {
    flex: 0 0 22%;
    border: 1px dashed #333;
    background-color: yellow;
}

 <flex-container-1><!-- main container -->

    <flex-item></flex-item><!-- flex item #1 (first column) -->

    <flex-container-2><!-- flex item #2 / nested flex container (second column) -->

        <flex-item></flex-item>

        <flex-item></flex-item>

        <flex-item></flex-item>

        <flex-item></flex-item>

    </flex-container-2><!-- close nested container -->

</flex-container-1><!-- close main container -->

jsFiddle

原文由 Michael Benjamin 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我在这个问题上苦苦挣扎，然后偶然发现了一个解决这个问题 的 新方法，因为我决定放弃并使用浮点数。我终于能够在不为列使用单独的 DIV 的情况下让它工作。

更新：我通过在 .items 上指定高度简化了我以前的版本。

1. 提供非百分比 width 和 height 到 .items 。
2. 在 flex-direction: column .items 。

CSS：

 .items {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 40em;
  height: 20em;
}

  .item:first-child {
    width: 20em;
    height: 20em;
    background-color: black;
  }

  .item:nth-child(2) {
    width: 20em;
    height: 5em;
    background-color: pink;
  }

  .item:nth-child(3) {
    width: 20em;
    height: 5em;
    background-color: blue;
  }

  .item:nth-child(4) {
    width: 20em;
    height: 5em;
    background-color: yellow;
  }

  .item:last-child {
    width: 20em;
    height: 5em;
    background-color: red;
  }

HTML:

 <div class="items">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div><!-- .items -->

代码笔： https ://codepen.io/anon/pen/ZXoqJJ

原文由 Shave Mad Ox 发布，翻译遵循 CC BY-SA 3.0 许可协议