相关疑难解决方法(0)

CSS列计数 - 更改顺序

我想在这里更改列的顺序:

#container {
    position: relative;
    width: 600px;
}

#column-wrapper {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-gap: 20px; 
    -moz-column-gap: 20px;
    column-gap: 20px;
}

#column-wrapper .column {
    display: inline-block;
    width: 100%;
    padding: 20px 0;
    margin-bottom: 20px;
    background-color: green;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    color: #fff;
}

Run Code Online (Sandbox Code Playgroud)

<div id="container">

    <div id="column-wrapper">
        
        <div class="column">
            <span>1</span>
        </div>
        
        <div class="column">
            <span>2</span>
        </div>
        
        <div class="column">
            <span>3</span>
        </div>
        
        <div class="column">
            <span>4</span>
        </div>
        
         <div class="column">
            <span>5</span>
        </div>
        
         <div class="column">
            <span>6</span>
        </div>
        
    </div>
    
</div>

Run Code Online (Sandbox Code Playgroud)

结果应该是这样的:

有谁知道这个简单的解决方案？

html css css3

Nep*_*nat

2015 05-25

5
推荐指数

1
解决办法

2612
查看次数

将不同高度的盒子均匀地分布在 flexbox 列上

我有一些宽度相同但高度不同的框（取决于它们的内容——它们是标题+文本的注释）和一个自动高度的容器（愿意滚动）。这个想法是将容器中的笔记跨列分布，使其看起来像 Google Keep。现在我正在使用 flexbox 行，但我正在失去空间：

我当前的 CSS 看起来像：

.container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  padding: 10px;
}
.note {
  flex-basis: 50%;
}
.note>div {
  margin: 10px;
}

Run Code Online (Sandbox Code Playgroud)

问题是，如果我切换到flex-direction: column，因为height: auto我的 flexbox 容器，注释只生成一列，因为他们看不到任何换行的理由。如果不先渲染注释，在 Javascript 中计算容器的高度将非常困难（我正在使用 React ......）我在这里遗漏了什么吗？

这是我希望实现的结果：