弹性框 - 堆叠不同大小的弹性项目

时间：2017-04-28 23:24:21

标签： html css flexbox

我试图使用弹性框将不同大小的div的行堆叠在一起，以便填充空白区域。

如果您运行以下代码，我试图让第5和第6行进入上面的空白区域。

有关如何实现这一目标的任何想法？

提前致谢， 亚历

＆＃13;
＆＃13; 
.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.flex-item {
  width: 30%;
  border: 1px solid;
  margin: 10px auto;
}
＆＃13; 
<html>

<head>
  <title>testing flex box</title>
  <link href="style.css" rel="stylesheet">
</head>

<body>
  <div class="flex-container">
    <div class="flex-item">
      <ul>
        <li>1</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
      </ul>
    </div>
    <div class="flex-item">
      <ul>
        <li>2</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
      </ul>
    </div>
    <div class="flex-item">
      <ul>
        <li>3</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
      </ul>
    </div>
    <div class="flex-item">
      <ul>
        <li>4</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
      </ul>
    </div>
    <div class="flex-item">
      <ul>
        <li>5</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
      </ul>
    </div>
    <div class="flex-item">
      <ul>
        <li>6</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
      </ul>
    </div>
    <div class="flex-item">
      <ul>

        <li>7</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
      </ul>
    </div>
  </div>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

您在CSS中寻找的最接近的内容是列CSS：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts

例如

.flex-container {
  column-count: 3;
  column-fill: balance;
}

.flex-item {
  display: inline-block;/* avoid to break through columns */
  width: 100%;
  border: 1px solid;
  margin: 10px auto;
}
<html>

<head>
  <title>testing flex box</title>
  <link href="style.css" rel="stylesheet">
</head>

<body>
  <div class="flex-container">
    <div class="flex-item">
      <ul>
        <li>1</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
      </ul>
    </div>
    <div class="flex-item">
      <ul>
        <li>2</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
      </ul>
    </div>
    <div class="flex-item">
      <ul>
        <li>3</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
      </ul>
    </div>
    <div class="flex-item">
      <ul>
        <li>4</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
      </ul>
    </div>
    <div class="flex-item">
      <ul>
        <li>5</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
      </ul>
    </div>
    <div class="flex-item">
      <ul>
        <li>6</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
      </ul>
    </div>
    <div class="flex-item">
      <ul>

        <li>7</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
      </ul>
    </div>
  </div>
</body>

</html>

  • flex无法执行此操作

  • 网格需要跨行遍历元素，您需要知道它们的大小以设置行的跨度。 以下示例，更改子项或内容的数量并查看其中断，将代码段悬停以查看其发生情况 

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 0px;
}

.item {
  border: solid;
  margin: 10px;
}

.item:nth-child(1) {
  grid-row: span 3;
}

.item:nth-child(2) {
  grid-row: span 1;
}

.item:nth-child(3),
.item:nth-child(4),
.item:nth-child(5) {
  grid-row: span 2;
}

/* break it */
html:hover .item {font-size:1.5em}
html:hover .item:nth-child(3n) {font-size:.75em;}
html:hover .item:nth-child(5) {display:none;}
<div class="container">
  <div class="item">
    <ul>
      <li>1</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
    </ul>
  </div>
  <div class="item">
    <ul>
      <li>2</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
    </ul>
  </div>
  <div class="item">
    <ul>
      <li>3</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
    </ul>
  </div>
  <div class="item">
    <ul>
      <li>4</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
    </ul>
  </div>
  <div class="item">
    <ul>
      <li>5</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
    </ul>
  </div>
  <div class="item">
    <ul>
      <li>6</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
    </ul>
  </div>
  <div class="item">
    <ul>

      <li>7</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
    </ul>
  </div>
</div>

  • 砌筑javascript实际上是使用的东西：）
相关问题
最新问题