1

Есть список товаров ul, каждый элемент списка представляет собой блок с определённой шириной. Элементы списка располагаются горизонтально. Как сделать так, чтобы если какому-то элементу не будет хватать места, то он будет переноситься на следующую строку?

            <ul class="list">
                <li class="product">
                    <p class="product-name">Первый товар</p>
                    <hr/>
                    <img src="" alt="Не удалось загрузить изображение">
                </li>
                <li class="product">
                    <p class="product-name">Второй товар</p>
                    <hr/>
                    <img src="" alt="Не удалось загрузить изображение">
                </li>
                <li class="product">
                    <p class="product-name">Третий товар</p>
                    <hr/>
                    <img src="" alt="Не удалось загрузить изображение">
                </li>
            </ul>
.list {
    list-style-type: none;

    display: flex;
    flex-direction: row;
    justify-content: space-between;

    margin-top: 10%;
}
.product {
    display: inline;

    cursor: pointer;

    background-color: #eee;

    width: 25%;

    margin-left: 5%;
    margin-right: 5%;

    border-radius: 2vh;

    z-index: 0;
}

Вопрос звучит очень легко, сам понимаю, но что-то затупил тут.

1 ответ 1

5

flex-flow: row wrap;

.list {
  list-style-type: none;
  display: flex;
  flex-direction: row;
  /*justify-content: space-between;*/
  flex-flow: row wrap;
  margin: 0;
  padding: 0;
}

.product {
  cursor: pointer;
  background-color: #eee;
  width: 20%;
  margin-left: 5%;
  margin-right: 5%;
  border-radius: 2vh;
  z-index: 0;
}
<ul class="list">
  <li class="product">
    <p class="product-name">Первый товар</p>
    <hr/>
    <img src="" alt="Не удалось загрузить изображение">
  </li>
  <li class="product">
    <p class="product-name">Второй товар</p>
    <hr/>
    <img src="" alt="Не удалось загрузить изображение">
  </li>
  <li class="product">
    <p class="product-name">Третий товар</p>
    <hr/>
    <img src="" alt="Не удалось загрузить изображение">
  </li>
  <li class="product">
    <p class="product-name">Третий товар</p>
    <hr/>
    <img src="" alt="Не удалось загрузить изображение">
  </li>
  <li class="product">
    <p class="product-name">Третий товар</p>
    <hr/>
    <img src="" alt="Не удалось загрузить изображение">
  </li>
</ul>

2

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.