Flexbox with direction: column but multi-column stack by side答案

【问题标题】：Flexbox with direction: column but multi-column stack by-sideFlexbox with direction: column but multi-column stack by side
【发布时间】：2016-08-30 21:09:48
【问题描述】：

当前布局：

嗨，我用flexbox 做了一个布局，它被设置为flex-direction: row; 然后它排列 (1.left) (2.right) (3.left)(4.right)，我将孩子设置为是width: 50%。

但我需要归档的更多是flex-direction: column，但有2列，项目的下半部分将向右移动。

期望的结果：

当前代码：

    .ds-content div{
        display: inline-flex;
        flex-wrap: wrap;
        align-items: flex-start;
     }

改变方向：列；

    .ds-content div{
         display: inline-flex;
         flex-wrap: wrap;
         align-items: flex-start;
         flex-direction: column;
         width: 100%;
         height: 150px;
     }

我遇到的问题是我无法为这个 flexbox 设置固定高度（将下半部分内容推到右侧），内容是从用户管理员动态获取的；在内容长度和子项数量方面是动态的。

提前致谢！

【问题讨论】：

请显示 HTML
如果你不能为容器设置一个固定的高度，那么列应该如何知道在哪里换行？
@jen Wong，我知道这个问题很老了，你有答案吗？

标签： html css flexbox

【解决方案1】：

检查我的 solution in Codepen

我保留flex-direction: row 以便使用align-content: stretch 并在弹性项目中具有相同的高度。现在您只需要使用order 属性即可。

【讨论】：

感谢您的评论！ :) 是的，我想过使用订单，但问题是集合的长度不同，它可以有 4 个项目、5 个项目或 10 个项目（它是从 cms 获取的），所以我想不出一个逻辑关于如何设置顺序。
哦，好吧，你没在标题上这么说，只是 4. 你可以使用 javascript 吗？或者这只能在 CSS/SASS/Less 中实现

【解决方案2】：

我认为为此最好使用列：

.ds-content div {
     width: 100%;
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
}

浏览器支持可能是个问题...

【讨论】：

【解决方案3】：

找了半天的解决办法，终于找到了解决办法。

如果你使用 Angular，你可以这样做：

  .ds-content div{
         display: inline-flex;
         flex-wrap: wrap;
         align-items: flex-start;
         flex-direction: column;
         width: 50%;
     }

<div class="ds-content">
  <div>
    <ng-container *ngFor="let item of anArray| slice:0:(anArray.length/2+anArray.length%2)">
    </ng-container>
  </div>
  <div>
    <ng-container *ngFor="let item of anArray| slice:(anArray.length/2+anArray.length%2):anArray.length">
    </ng-container>
  </div>
</div>

仅适用于 HTML CSS JS，您可以使用：

     const anArray = [
            { tittle: "1", body: "Example 1" },
            { tittle: "2", body: "Example 2" },
            { tittle: "3", body: "Example 3" },
            { tittle: "4", body: "Example 4" },
            { tittle: "5", body: "Example 5" },
            { tittle: "6", body: "Example 6" }
        ]
        
        function fill2flexColumn() {
            let value = '';
            let part1 = anArray.slice(0 , anArray.length/2+anArray.length%2);
            let part2 = anArray.slice(anArray.length/2+anArray.length%2,anArray.length );

             part1.forEach((post) => {
                value += `<li>${post.tittle} - ${post.body}</li>`;
            });
            document.querySelector('.ds-content .part1').innerHTML = value;
            value ='';
            part2.forEach((post) => {
                value += `<li>${post.tittle} - ${post.body}</li>`;
            });

            document.querySelector('.ds-content .part2').innerHTML = value;
        };
        
        fill2flexColumn();

.ds-content{
         display: flex;
         flex-wrap: wrap;
}
.ds-content div{
         display: inline-flex;
         flex-wrap: wrap;
         align-items: flex-start;
         flex-direction: column;
         width: 50%;
     }

    <body>
       <div class="ds-content">
        <div class="part1"></div>
        <div class="part2"></div>
      </div>
</body>

【讨论】：