Могу ли я как-то ограничить кол-во элементов во флекс-контейнере?

Question

[Василий Хрягин]

https://codepen.io/Concencuc/pen/PoNwzep
Чтобы flex-direction: column работал как мне надо, контейнеру нужно задавать высоту. В моем коде это решение не подходит. Подскажите пожалуйста, какие еще есть варианты?

Comments

[RAX7]

https://developer.mozilla.org/ru/docs/Web/CSS/colu...

[Dima Polos]

Ну если ограничить, то можно, конечно, типа nth-child(n + 5 ){ display: none; } - будет 5 элементов, а дальше все скроются...

[Ankhena]

Судя по вашим вопросам, вам нужно гуглить "masonry".

Answer 1

[hzzzzl]

на кодепене 9 div.item, и они расположены в сетку 3*3
а что должно получиться, и как это должно выглядеть?

Comments

[Василий Хрягин]

я там max-height написал, без него была бы одна колонка, но хочу найти другое решение, с таким же результатом как в кодепене

[hzzzzl]

Василий Хрягин, так подойдет?
на кодепене нельзя анонимно сохранять пены :(

.wrap {
    max-width: 1000px;
    margin-top: 20px;
    margin-right: 20px;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
		.item {
      flex-basis: 30.33%;  /* вместо width */
      height: 0;   /*  зачем? */
      padding-top: 20%;
      background-color: red;
      margin-top: 4.4%;
			/* width: 30.33%; */
		}
	}