9

Допустим есть блоки

.main {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  background: #fff;
}

.box {
  width: 170px;
  height: 130px;
  border-radius: 3px;
  border: dashed 2px rgba(0, 0, 0, 0.1);
  margin: 10px;
}
<div class="main">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Мне нужно чтобы последние блоки прижимались к левому краю, но при этом чтобы вся конструкция блоков была по центру, т.е. будто там указан justify-content: center.

Можно задать фиксированную ширину, но проблема в том что .main резиновый.

На jsfiddle это хорошо видно.

Если уменьшать или увеличивать область отображения то будет работать warp, но при этом справа будет много свободного пространства

1
  • А имеет ли значение порядок блоков? Что если вместо горизонтального направления использовать вертикальное?
    – Qwertiy
    21 авг 2017 в 16:39

3 ответа 3

5

.main {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, 170px);
  max-width: 890px;
  margin: auto;
  justify-content: center;
}

.box {
  height: 130px;
  border-radius: 3px;
  border: dashed 2px rgba(0, 0, 0, 0.1);
}
<div class="main">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

2
  • Интересный вариант. Стоит учитывать caniuse.com/#feat=css-grid
    – Qwertiy
    21 авг 2017 в 15:23
  • Да, я просто не думаю, что флексами такое удастся побороть в принципе. 21 авг 2017 в 15:30
4
+50

Как вариант

*,
:before,
:after {
    box-sizing: border-box;
}

* {
    padding: 0;
    margin: 0;
}

.main {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    background: #fff;
}

.box {
    width: 170px;
    height: 130px;
    border-radius: 3px;
    border: dashed 2px rgba(0, 0, 0, 0.1);
    margin: 10px;
}

.box:empty {
    height: 0;
    border: none;    
    margin-top: 0;
    margin-bottom: 0;
}
<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 class="box">6</div>
  <div class="box">7</div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>  
</div>

2
  • Интересно. Лучше вместо margin: 0 10px; сделать margin-top: 0; margin-bottom: 0; - чтобы было только одно место для изменения отступов, а не два.
    – Qwertiy
    21 авг 2017 в 16:34
  • 1
    @Qwertiy поправил
    – soledar10
    21 авг 2017 в 17:19
2

Можно обернуть блоки в еще один блок которому задаешь justify-content: flex-start; и изменять его ширину через @media, а блоку .main задать justify-content: center;

1
  • media не умеет остатки от деления
    – Qwertiy
    21 авг 2017 в 15:23

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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