Да, в этом случае вы можете использовать column-count
вместо flex
.Например:
div {
column-count: 2;
/* below properties are only for beautification purpose */
column-gap: 20px;
text-align: justify;
padding: 10px;
}
<div>
It was so beautiful out on the country, it was summer- the wheat fields were golden, the oats were green, and down among the green meadows the hay was stacked. There the stork minced about on his red legs, clacking away in Egyptian, which was the language his mother had taught him. Round about the field and meadow lands rose vast forests, in which deep lakes lay hidden.
Yes, it was indeed lovely out there in the country. In the midst of the sunshine there stood an old manor house that had a deep moat around it. From the walls of the manor right down to the water's edge great burdock leaves grew, and there were some so tall that little children could stand upright beneath the biggest of them. In this wilderness of leaves, which was as dense as the forests itself, a duck sat on her nest, hatching her ducklings. She was becoming somewhat weary, because sitting is such a dull business and scarcely anyone came to see her. The other ducks would much rather swim in the moat than waddle out and squat under the burdock leaf to gossip with her.
</div>
Здесь можно настроить column-count
для количества ожидаемых столбцов.
Если вы ищетеflex
решение (после того, как я написал этот xD, я понял, что вы похожи), вы можете попробовать приведенный ниже код.Здесь я объявляю родительский элемент div
как flex
, а затем устанавливаю каждый из p
в 33.33%
с flex-grow
равным 1
, что больше похоже на то, насколько должен расти элементотносительно остальных изгибаемых элементов.Тем не менее, это больше ручная работа, чем column-count
, поэтому я бы порекомендовал вам перейти к предыдущему решению, чем это.
div {
display: flex;
flex-wrap: wrap;
}
div > p {
flex-grow: 1;
width: 33.33%;
height: 100px;
text-align: justify;
margin: 10px;
}
<div>
<p>
It was so beautiful out on the country, it was summer- the wheat fields were golden, the oats were green, and down among the green meadows the hay was stacked. There the stork minced
</p>
<p>
about on his red legs, clacking away in Egyptian, which was the language his mother had taught him. Round about the field and meadow lands rose vast forests, in which deep lakes lay hidden.
</p>
</div>