driver458
@driver458

Как сделать ровную сетку Flex-box?

example
Мне нужно чтобы свободное место между элементами распределялось равномерно, но при этом нижний квадрат (или 2, 3) таких квадрата были ровно под верхними квадратами. Ваши предложения?

59de7a2d35b12820337298.png
<main>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </main>


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

div {
  background: red;
  margin: 20px auto;
  flex-basis: 200px;
  height: 200px;
  border: 1px solid black;
}
  • Вопрос задан
  • 6589 просмотров
Решения вопроса 2
dijavu
@dijavu
<div class="grid">

    <div>Ячейка</div>
    <div>Ячейка</div>
    ...
    
    <!-- Повторить max число колонок вмещающихся по ширине экрана -->
    <div class="grid-clearfix"></div>
    <div class="grid-clearfix"></div>
    ....
    <div class="grid-clearfix"></div>

  </div>


.grid {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
}

.grid > div {
  flex-grow: 1;
  flex-basis: 270px;
  box-sizing: border-box;
  padding: 5px;
}

.grid .grid-clearfix {
  opacity: 0;
  height: 0px;
  padding: 0;
  overflow: hidden;
}

В действии можно посмотреть тут
Ответ написан
Комментировать
driver458
@driver458 Автор вопроса
Solution
Source

main {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-auto-rows: 100px;
  grid-gap: 15px;
  padding: 25px;
}

div {
  background: red;
  text-align: center;
  border: 1px solid black;
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Если использовать space-between, то чтобы последний ряд был как flex-start, то добавляют пустые блоки. Столько сколько максимально влезает блоков в строку -1.

У меня для этого специальный класс сделан
.empty-flex {
  height: 0;
  border: 0; //опционально, для универсальности
  text-decoration: none;  //опционально, для универсальности
}
Ответ написан
Комментировать
@maxfox
main {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
}

div {
  background: red;
  margin: 20px;
  flex-basis: 200px;
  height: 200px;
  border: 1px solid black;
}
main > div:last-child {
  margin-right: auto;
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы