1

Как можно реализовать блок с flex-ами? Сделать в недостающих местах пустые блоки? Или есть другой вариант?

Ссылка на картинку

1 ответ 1

5

Как например:

* {
  box-sizing: border-box;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  
  display: flex;
  
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  
  text-align: center;
}

ul li {
  margin: 0 0 50px;
  width: 20%;
  position: relative;
}

.first li span:before,
.first li span:after {
  content: '';
  position: absolute;
  top: 105px;
  height: 45px;
  width: 1px;
  background: #eee;
  transform-origin: 0% 0%;
}

.first li span:before {
  transform: rotate(30deg);
  left: 0;
}
.first li span:after {
  transform: rotate(-30deg);
  right: 0;
}


li span {
  display: inline-block;
  width: 100px;
  height: 100px;
  line-height: 100px;
  border: 1px solid #eee;
  border-radius: 5px;  
  position: relative;
  background: #fff;
}
<ul class="first">
  <li><span>1</span></li>
  <li><span>2</span></li>
  <li><span>3</span></li>
  <li><span>4</span></li>
</ul>
<ul>
  <li><span>5</span></li>
  <li><span>6</span></li>
  <li><span>7</span></li>
  <li><span>8</span></li>
  <li><span>9</span></li>
</ul>

0

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