0

У меня есть flex контейнер Courses. Мне необходимо, чтобы элементы растягивались на всю ширину контейнера и при переходе на новую строку начинались слева. Пробовал justify-content: space-between, но получается что-то по типу: введите сюда описание изображения

Я хочу, чтобы с новой строки они начинались слева и были на всю ширину контейнера. Возможно ли это? Заранее спасибо за ответ

3 ответа 3

1

Если я правильно понял: "элементы растягивались на всю ширину контейнера и при переходе на новую строку начинались слева", при этом в верхней строке у Вас четыре элемента, а в нижней два, то вероятно это Вам поможет.

.row {
    display: flex;
    flex-wrap: wrap;
}

.col {
    flex: 1 0 25%;
    border: 1px solid #000;
    height: 50px;
    box-sizing: border-box;
}
<div class="row">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
</div>

0

Пример

* {
  box-sizing: border-box;
}

.row {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.row::after {
  content: "";
  flex: auto;
}

.col {
  width: 25%;
  border: 1px solid #222;
  height: 50px;
}
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

0

При адаптиве просто меняешь width

.container {
  max-width: 1230px;
  margin: 0 auto;
}

.items {
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}

.item {
  margin: 0 10px 20px;
  width: calc(100% / 4 - 20px);
  border: 1px solid #000;
  height: 200px;
}
<div class='container'>
    <ul class='items'>
        <li class='item'></li>
        <li class='item'></li>
        <li class='item'></li>
        <li class='item'></li>
        <li class='item'></li>
    </ul>
</div>

Ваш ответ

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

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