时间戳

首页 > 解决方案 > CSS：你能用 flexbox 实现列数吗？

html - CSS：你能用 flexbox 实现列数吗？

问题描述

我一直在尝试column-count: 3通过使用 flex 容器来实现 CSS 属性

我想达到的目标：

.main {
  column-count: 3;
  width: 400px;
  height: 300px;
  background: #eee;
}
<div class="main">

  <div class="category">
    <h1>Category 1</h1>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis maiores minima reiciendis culpa nam, ratione, impedit a non aperiam ad eaque qolli reiciendis culpa nam, ratione, impedit a non aperiam ad eaque qollia.</p>
  </div>
  
    <div class="category">
    <h1>Category 2</h1>
    <p>Lorem ipsum reiciendis culpa nam, ratione, impedit a non aperiam ad eaaque quaerat rem ipsum veniam, maxime eligendi debitis odit mollitia.</p>
  </div>
  
  <div class="category">
    <h1>Category 3</h1>
    <p>Lorem ipsum doloitia.</p>
  </div>
  
</div>

我被 flex-box 困住的地方

.main {
      display: flex;
      width: 400px;
      height: 300px;
      background: #eee;
    }
    
 
<div class="main">

      <div class="category">
        <h1>Category 1</h1>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis maiores minima reiciendis culpa nam, ratione, impedit a non aperiam ad eaque qolli reiciendis culpa nam, ratione, impedit a non aperiam ad eaque qollia.</p>
      </div>
      
        <div class="category">
        <h1>Category 2</h1>
        <p>Lorem ipsum reiciendis culpa nam, ratione, impedit a non aperiam ad eaaque quaerat rem ipsum veniam, maxime eligendi debitis odit mollitia.</p>
      </div>
      
      <div class="category">
        <h1>Category 3</h1>
        <p>Lorem ipsum doloitia.</p>
      </div>
      
    </div>

从这里，我无法弄清楚如何将category1的溢出移动到第二列。flex可以实现吗？

标签： htmlcssflexboxcolumn-count

解决方案

不可能，恐怕。:(

每个 flex 项目（任何元素的直接子元素display: flex）display: inline-flex都会建立一个新的格式化上下文，这意味着该项目的任何子元素都将包含在其中。因此，当您使用 flex 时，文本的运行将始终像这样分开。

如果您想了解更多信息，请参阅 MDN 中的格式化上下文介绍。

推荐阅读