我可以使用 CSS 以网格样式显示具有不同高度的项目吗？

Question

我在 HTML 中有一个由不同大小的项目组成的网格。我想在堆叠的网格中显示项目 - 水平和垂直。

过去我会使用 javascript - 比如masonry library。但我想知道现在是否可以使用 Flex 使用 CSS。

示例 HTML：

div class="wrapper">
  <div class="grid">
    <div class="item">
      <h2>Item 1</h2>
      <ul>
        <li>1</li>
      </ul>
    </div>
    <div class="item">
      <h2>Item 2</h2>
      <ul>
        <li>1</li>
        <li>2</li>
      </ul>
    </div>
    <div class="item">
      <h2>Item 3</h2>
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
    </div>

示例 CSS：

.wrapper {
  width: 480px;
  height: 420px;
  outline: 1px solid #f00;
  padding: 10px;
}

.grid {
  display: flex;
  flex-direction: row OR column;
  flex-wrap: wrap;
}

.item {
  padding: 10px;
  width: 100px;
  outline: 1px solid #00f;
}

JsFiddle 在这里：http://jsfiddle.net/BaronGrivet/pcwudrmc/60883/

使用 flex-direction: row; 我得到以下输出 - 其中项目的大小调整为每行上最大的项目：

更改为flex-direction: column; - - 我得到以下输出 - 项目溢出父 DIV：

我的偏好是使用flex-direction: column;，但当它们到达父 DIV 的底部时，它们会向右换行。在此示例中，“第 4 项”将位于新列的顶部。

这在 CSS 中可行吗？

Flex 使用row 垂直环绕但没有使用column 水平环绕似乎很奇怪。

Answer 1

您只是错过了一个小细节：您有两个容器，并且您将 flex 应用于未指定固定高度的内部容器，因此整个容器的内容溢出了外部容器。您需要在内部容器中添加height:100%（或min-height:100%）以避免溢出并允许换行：

.wrapper {
  width: 480px;
  height: 420px;
  outline: 1px solid #f00;
  padding: 10px;
}

.grid {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height:100%;
}

.item {
  padding: 10px;
  width: 100px;
  outline: 1px solid #00f;
}

<div class="wrapper">
  <div class="grid">
    <div class="item">
      <h2>Item 1</h2>
      <ul>
        <li>1</li>
      </ul>
    </div>
    <div class="item">
      <h2>Item 2</h2>
      <ul>
        <li>1</li>
        <li>2</li>
      </ul>
    </div>
    <div class="item">
      <h2>Item 3</h2>
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
    </div>
    <div class="item">
      <h2>Item 4</h2>
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>      
      </ul>
    </div>
    <div class="item">
      <h2>Item 5</h2>
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
      </ul>
    </div>
    <div class="item">
      <h2>Item 6</h2>
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
      </ul>
    </div>  
    <div class="item">
      <h2>Item 7</h2>
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
      </ul>
    </div>  
    <div class="item">
      <h2>Item 8</h2>
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
      </ul>
    </div>  
  </div>
</div>