CSS: Можете ли вы добиться подсчета столбцов с помощью flexbox? - PullRequest
Новая
       34

CSS: Можете ли вы добиться подсчета столбцов с помощью flexbox?

0 голосов
/ 26 февраля 2020

Я пытался получить свойство CSS column-count: 3 с помощью гибких контейнеров

Чего я хотел бы достичь: 

.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?

Ответы [ 2 ]

0 голосов
/ 26 февраля 2020

Попробуйте убрать высоту с css: 

.main {
  display: flex;
  width: 400px;
  background: #eee;
}
0 голосов
/ 26 февраля 2020

Боюсь, это невозможно. : (

Каждый элемент flex (прямой дочерний элемент любого элемента с установленным на него display: flex или display: inline-flex) устанавливает новый контекст форматирования, означающий, что в нем будет содержаться любой дочерний элемент элемента. при использовании команды flex текстовые разделы всегда будут разделяться таким образом.

Если вы хотите узнать больше, вот введение в контексты форматирования из MDN .

...