Я использую flexbox для создания своего макета, однако я не могу правильно расположить элементы в моем последнем ряду. Могу ли я восстановить тот же макет с сеткой? - PullRequest
Новая
       71

Я использую flexbox для создания своего макета, однако я не могу правильно расположить элементы в моем последнем ряду. Могу ли я восстановить тот же макет с сеткой?

0 голосов
/ 25 февраля 2020

У меня есть гибкий контейнер с шириной, которая не является фиксированной, и группа детей внутри него с фиксированной шириной. Я установил flex-wrap на wrap и justify-content на space-evenly. Это прекрасно работает и прекрасно для большинства частей, однако, положение элементов в последнем ряду не там, где я хочу, чтобы они были

Я понимаю, что элементы в последнем ряду находятся там, где они находятся из-за Содержание: пространство равномерно. Мне интересно, можно ли равномерно распределять содержимое, когда строка заполнена, в то же время сохраняя дочерние элементы в последней строке слева от div. Это должно выглядеть примерно так:

enter image description here

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

    .cards-list {
        padding-top: 20px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
    }
    .card {
        width: 120px;
        height: 180px;
        background-color: red;
        margin-bottom: 10px;
    }
<div class='cards-list'>
   <div class='card'></div>
   <div class='card'></div>
   <div class='card'></div>
   <div class='card'></div>
   <div class='card'></div>
   <div class='card'></div>
   <div class='card'></div>
   <div class='card'></div>
</div>

Ответы [ 2 ]

2 голосов
/ 25 февраля 2020

Я обычно делаю это при использовании flex для разметки сетки, когда мне нужен запасной вариант для display: grid;. Вы можете добавить пустые заполнители сетки с той же шириной / полем, что и у обычных карт, и установить высоту на 0. Формула должна иметь на 1 заполнитель меньше, чем количество строк в вашей карте, поэтому 4 карты> 3 заполнителя, 8 карт> 7 заполнителей , Надеюсь, это понятно.

Если вам не нужен запасной вариант, вы можете использовать класс .grid в моем примере ниже.

РЕДАКТИРОВАТЬ
По мере работы с Vue вы можете сделать это. Помните, что min-width - это просто значение, которое я принял, и оно должно было бы изменить его для представления ваших точек останова. Если вам нравится, вам даже не нужна эта часть. Это просто стартовый комплект для вас, его можно изменить по своему вкусу и потребностям проекта. 

<template v-if="window.matchMedia('(min-width: 998px)').matches">
  <div v-for="i of 15" :key="`card-filler-grid-name-${i}`" class="card--filler" />
</template>


.cards-list {
  padding-top: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  max-width: 40rem;
  margin-bottom: 4rem;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  max-width: 40rem;
}

.card {
  width: 120px;
  height: 180px;
  background-color: red;
  margin-bottom: 10px;
}

.card--filler {
  width: 120px;
  height: 0;
}
<div class='cards-list'>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card--filler'></div>
  <div class='card--filler'></div>
  <div class='card--filler'></div>
  <div class='card--filler'></div>
</div>

<div class='grid'>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
</div>
0 голосов
/ 25 февраля 2020

Мое решение - установить размер пространства между каждой картой, и карта станет гибкой. Давайте сделаем это: 

.wrapper{
  background-color: green;
  width: 100%;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
}

.item{
  width: calc(25% - 40px); /* 25% for 4 items, 33% for 3, 50% for 2 .... -> substract the right and left margin*/
  margin: 20px;
  background-color: yellow;
  height: 150px;
  box-sizing: border-box;
}
<div class="wrapper">
  <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>

Это решение довольно простое, но очень эффективное. Надеюсь, это поможет вам! Codepen для редактирования кода: https://codepen.io/ZellRDesign/pen/YzXNdLr

Примечание: для мобильных устройств: не забудьте добавить медиазапросы с justify-content: center; когда есть только один столбец карты

...