Помогите с flexbox'ом

275

15 марта 2017, 18:02

Как придать элементу значение justify-content: center и flex-start одновременно? Получается что мне необходимо сделать все блоки в центре, а последнюю строчку сделать flex-start для того что бы последний элемент был не в центре, а прижат к левому краю. Но я не пойму как этого добиться. Вот что мне нужно, только это все в центре разместить... А не иметь ужасный отступ справа

Answer 1

Для решения вашей задачи можно вообще без 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>

Answer 2

.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>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как увеличить скорость работы сайта Front?

На сайте backend отрабатывает за 50 мс, а фронт забирает кучу времениВ итоге полсекунды на отображение страницы с использованием кэша, без кэша...

373

MySQL

MySql использует весь ресурс процессора

Сервер постоянно загружен почти на 100% Проблема возникает с запуском службы mysqlCPU на 80% загружает - /usr/sbin/mysql --basedir/var/lib/mysql --plugin-dir/usr/lib/mysql/plugin...

346

MySQL

Как выполнить инкремент значения NULL в MySQL?

Есть запрос:

381

MySQL

Сумма строк, имеющих одинаковое значений

Есть таблица с даннымиКак мне получить сумму значений discount тех строк, где значения поля by_recomended одинаковые? (сумма по бобкову, докторову и т

275