Как можно реализовать блок с flex-ами? Сделать в недостающих местах пустые блоки? Или есть другой вариант?
1 ответ
Как например:
* {
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>