Форматирование Flex Layout Grid - PullRequest
Новая
       20

Форматирование Flex Layout Grid

0 голосов
/ 10 апреля 2020

Это мое текущее форматирование сетки:

Format I have

Код:

image

Есть ли в любом случае следовать этому форматированию с гибкий макет:

Format I want

Очевидно, что у меня на один значок меньше, чем нужно для форматирования, но концепция заключается в том, чтобы свободно настраивать сетку в соответствии с любым форматом, который я хочу ( Например, если есть 7 значков, поместите последние два под значком 2-го и 4-го и т. Д. И т. Д. c ...) В конечном счете, я хочу, чтобы значки располагались друг под другом

1 Ответ

0 голосов
/ 10 апреля 2020

С CSS / SASS: 

nav {
  display: flex;
  flex-wrap: wrap;
  width: 195px;
  justify-content: center;
}

img {
  height: 30px;
  width: 30px;
  background: lightblue;
  margin: 0 5px 0 5px;
  object-fit: cover;
}

img:nth-child(-n+5) {
  margin-bottom: 10px
}

img:nth-child(1) {
  margin-left: 0;
}

img:nth-child(5) {
  margin-right:0px;
}
<nav>
  <img src="https://via.placeholder.com/150">
  <img src="https://via.placeholder.com/150">
  <img src="https://via.placeholder.com/150">
  <img src="https://via.placeholder.com/150">
  <img src="https://via.placeholder.com/150">
  <img src="https://via.placeholder.com/150">
  <img src="https://via.placeholder.com/150">
  <img src="https://via.placeholder.com/150">
</nav>
...