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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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