Я стараюсь иметь три элемента гибкости в строке и использовать space-between
, чтобы первый и третий элементы в каждой строке касались внешней стороны контейнера, но оставались на равном расстоянии.
Это работает по назначению, но проблемы возникают во второй строке, когда пятый элемент не выравнивается, как я хочу, непосредственно под вторым элементом. У меня будет переменное количество контента, поэтому нужно, чтобы макет работал с любым количеством ящиков.
Я показал свой код ниже. Может ли кто-нибудь сказать мне, как это исправить?
.main{
background: #999;
margin:0 auto;
width:1300px;
display:flex;
flex-wrap: wrap;
justify-content: space-between;
}
.box{
background: #7ab9d7;
color: #555;
height: 300px;
width: 30%;
margin-bottom: 30px;
text-align: center;
font-size: 30px;
padding-top: 120px;
}
<div class="main">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
</div>