Можно ли отображать элементы flexbox в две строки вместо одной?

Что я пытаюсь здесь сделать, так это то, что я хочу использовать две строки для отображения неопределенного количества элементов. Я буду использовать вертикальную прокрутку, чтобы показать переполненные элементы. Если я использую CSS ниже, он отображает элементы в одной строке. Я хочу знать, можно ли использовать 2 строки вместо одной или есть ли какой-нибудь хак для достижения этого с помощью flexbox?

.items-list {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

<div class = "items-list">
  <div class = "item"></div>
  <div class = "item"></div>
  <div class = "item"></div>
  <div class = "item"></div>
  <div class = "item"></div>
  <div class = "item"></div>
  <div class = "item"></div>
  <div class = "item"></div>
  <div class = "item"></div>
  <div class = "item"></div>
  .......
</div>

Я часами пытался найти решение или ответ, возможно ли это сделать с помощью flexbox. Любая помощь будет очень высоко ценится.

вы имеете в виду точно 2 ряда, не больше не меньше?

— 27.05.2019 22:48

Если вы установите flex-wrap: nowrap, он не будет перенесен. Для этого можно использовать сетку.

— 27.05.2019 22:49

@TemaniAfif да, ровно две строки. и количество элементов будет неопределенным.

— 27.05.2019 22:50

css flexbox

27.05.2019 22:45

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

1 253

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете сделать это с помощью сетки CSS:

.items-list {
  display: grid;
  grid-template-rows: 50px 50px; /* 2 rows of 50px */
  grid-auto-flow: column;  /* a column flow */
  grid-auto-columns:100px; /* each column will 100px of width */
  grid-gap: 5px;
  overflow: auto;
}
.item {
  border:2px solid red;
}

<div class = "items-list">
  <div class = "item"></div>
  <div class = "item"></div>
  <div class = "item"></div>
  <div class = "item"></div>
  <div class = "item"></div>
  <div class = "item"></div>
  <div class = "item"></div>
  <div class = "item"></div>
  <div class = "item"></div>
  <div class = "item"></div>
  <div class = "item"></div>
  <div class = "item"></div>
  <div class = "item"></div>
  <div class = "item"></div>
  <div class = "item"></div>
  <div class = "item"></div>
  <div class = "item"></div>
  <div class = "item"></div>
</div>

Связанный вопрос, чтобы получить другой вид макета: Могу ли я использовать css-grid для отображения неизвестного количества элементов в порядке чтения слева направо в двух строках?

27.05.2019 22:52