Как придать элементу значение justify-content: center
и flex-start
одновременно? Получается что мне необходимо сделать все блоки в центре, а последнюю строчку сделать flex-start
для того что бы последний элемент был не в центре, а прижат к левому краю. Но я не пойму как этого добиться.
Вот что мне нужно, только это все в центре разместить... А не иметь ужасный отступ справа
-
Над этой проблемой бьются многие века – Yuri 13 мар '17 в 20:19
2 ответа
Для решения вашей задачи можно вообще без flex justify-content обойтись. Объедините всё ещё в один блок и просто установить margin: 0 auto;
. В общем, вот:
.block {
width: 100%;
background-color: #eee;
}
.block-flexbox {
display: flex;
width: 330px;
margin: 0 auto;
flex-wrap: wrap;
}
.block-flexbox-item {
width: 100px;
height: 100px;
margin: 5px;
background-color: red;
}
<div class="block">
<div class="block-flexbox">
<div class="block-flexbox-item"></div>
<div class="block-flexbox-item"></div>
<div class="block-flexbox-item"></div>
<div class="block-flexbox-item"></div>
<div class="block-flexbox-item"></div>
<div class="block-flexbox-item"></div>
<div class="block-flexbox-item"></div>
</div>
</div>
.container{display:flex;justify-content:center}
.flx{border:2px solid green;height:50px;width:50px;margin:5px}
<div class="container">
<div class="flx"></div>
<div class="flx"></div>
<div class="flx"></div>
</div>
<div class="container">
<div class="flx"></div>
<div class="flx"></div>
<div class="flx"></div>
</div>