Как выровнять левую последнюю строку/строку в нескольких строках flexbox

У меня проблема с макетом flexbox. Я создаю контейнер с ящиками, заполненными изображениями, и я решил использовать макет flexbox, чтобы оправдать контент, чтобы он выглядел как сетка

Её код:

<div class="container">

    <div class="item"></div>
    <div class="item"></div>
    ...
    <div class="item"></div>

</div>

и CSS:

.container {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    justify-content: space-around;
    -webkit-justify-content: space-around;
    -moz-justify-content: space-around;
    flex-flow: row wrap;
    -webkit-flex-flow: row wrap;
    -moz-flex-flow: row wrap;
}

.container .item { width: 130px; height: 180px; background: red; margin: 0 1% 24px; }

И все выглядит хорошо, за исключением последней строки/строки, - когда он не содержит того же числа элементов, что и другие строки, центрирующие элементы, и это разбило мой эффект сетки.

http://jsfiddle.net/puz219/7Hq2E/

Как выровнять последнюю строку/строку с левой стороны?

ОТВЕТЫ

Ответ 1

Получил это. (Я думаю) (это мой первый вклад здесь!)

Представьте себе макет, который должен иметь 4 изображения в строке. w: 205 ч: 174 Проблема: использование justify-content: space-around, если в последней строке нет 4 изображений (есть 3, 2 или 1), они не будут уважать сетку, они будут распространяться. Так.

Создайте в html 3 divs с классом "fill-empty-space-childs", как это.

.filling-empty-space-childs {
    width:205px; /*the width of the images in this example*/
    height:0; /*Important! for the divs to collapse should they fall in a new row*/
}

В контейнере flexbox отображается: flex/flex-wrap: wrap;/justify-content: space-around

Последняя строка может содержать 4, 3, 2, 1 изображения. 4 изображения: без проблем, эти три divs рухнули бы в новой строке, так как они не имеют высоты. 3 изображения: нет проблем, один div будет находиться в одной строке, невидимый, а два других будут переноситься в новую строку, но рухнет, так как они не имеют высоты. 2 изображения: нет проблем, два divs будут в одной строке, невидимы, остальные... рухнули 1 изображение: нет проблем, три div будут заполнять пробел.

Ответ 2

К сожалению, это невозможно при использовании flexbox.

Лучшая работа - добавить невидимых детей, заполняя "пустые" блоки в последней строке. Таким образом, фактический, видимый элемент выравнивается влево.

Аналогичный вопрос: Flex-box: выровнять последнюю строку с сеткой

Ответ 3

Вы можете использовать margin-right:auto в элементе гибкого элемента last-child.

Проблема заключается в том, что вы потеряете свойство space-between слева для этого элемента flex.

Надеюсь, что это поможет!

Ответ 4

Я думал, что этот пример может быть полезен для тех, кто хочет несколько элементов и позволяет реагировать, элементы сетки меняются в зависимости от размера видового экрана. Он не использует невидимых детей, все это делается через css.

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

http://codepen.io/kunji/pen/yNPVVb

Пример HTML

<div class="main-container">

    <div class="main-items-container">

        <div class="item-container">
          <h2>Item Name</h2>
        </div>

        <div class="item-container">
          <h2>Item Name</h2>
        </div>

        <div class="item-container">
          <h2>Item Name</h2>
        </div>

        <div class="item-container">
          <h2>Item Name</h2>
        </div>

        <div class="item-container">
          <h2>Item Name</h2>
        </div>

        <div class="item-container">
          <h2>Item Name</h2>
        </div>

    </div>

</div>

Пример CSS

.main-container {
  max-width: 1000px;
  min-width: 300px;
  margin: 0 auto;
  padding: 40px;
  box-sizing: border-box;
  border: 1px solid #000;
}

.main-items-container {
  display: -ms-flexbox;
  display: flexbox;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  padding: 0;
  margin: 10px 0;
  list-style: none;
  width: auto;
  -webkit-flex-flow: row wrap;
  justify-content: flex-start;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-align-items: stretch;
  align-items: stretch;
  box-sizing: border-box;
}

@media (min-width: 971px) {
  .item-container {
    margin: 10px 2%;
    width: 22%;
    padding: 10px;
    border: 1px solid #000;
    box-sizing: border-box;
  }
  .item-container:nth-child(4n+1) {
    margin-left: 0;
  }
  .item-container:nth-child(4n) {
    margin-right: 0;
  }
}

@media (min-width: 550px) and (max-width: 970px) {
  .item-container {
    margin: 10px 2.50%;
    width: 30%;
    padding: 10px;
    border: 1px solid #000;
    box-sizing: border-box;
  }
  .item-container:nth-child(3n+1) {
    margin-left: 0;
  }
  .item-container:nth-child(3n) {
    margin-right: 0;
  }
}

@media (max-width: 549px) {
  .item-container {
    margin: 10px 0;
    width: initial;
    padding: 10px;
    border: 1px solid #000;
    box-sizing: border-box;
  }
}

Ответ 5

Вы не указали, должно ли оно быть на 100% отзывчивым, но работает что-то вроде этой техники.

Используйте один контейнер для каждой строки и ограничивайте его минимальной шириной, а также добавьте скрытые элементы, чтобы сделать работу расчета:

HTML

<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>

</div>
<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>

</div>
<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item empty"></div>
    <div class="item empty"></div>

</div>

CSS

.container {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    justify-content: space-around;
    -webkit-justify-content: space-around;
    -moz-justify-content: space-around;
    flex-flow: row wrap;
    -webkit-flex-flow: row wrap;
    -moz-flex-flow: row wrap;
    min-width:580px;
    background:rgba(00,00,00,0.5);
}
.container .item { width: 130px; height: 180px; background: #000; margin: 0 1% 24px;  }

.container .item.empty{opacity:0;}

Вот пример.

Ответ 6

Это не эффект, которого вы хотели достичь?

http://jsfiddle.net/7Hq2E/21/

CSS

.container {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    flex-flow: row wrap;
    -webkit-flex-flow: row wrap;
    -moz-flex-flow: row wrap;
}
.container .item {
    width: 23%;
    height: 180px;
    background: red;
    margin: 0 1% 20px;
}

HTML:

<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

Ответ 7

Я проверил его, и он работал лучше в моем инструменте редактора HTML

script должен быть способом

Часть CSS

.container {
    display: flex;
    дисплей: -webkit-flex;
    display: -moz-flex;
    justify-content: space-around;
    -webkit-justify-content: space-around;
    -moz-justify-content: space-around;
    flex-flow: обертка строк;
    -webkit-flex-flow: обертка строк;
    -moz-flex-flow: строка wrap;
}

.container.item {width: 130px; высота: 180 пикселей; фон: зеленый; margin: 0 1% 24px; }

Часть HTML

<div class="container">

    <div class="item"><a href='google.com'>Google</a></div>
    <div class="item"><a href='google.com'>Yahoo</a></div>
    <div class="item"><a href='google.com'>Bing</a></div>
</div>

<div class="container">
    <div class="item"><a href='google.com'>Google</a></div>
    <div class="item"><a href='google.com'>Yahoo</a></div>
    <div class="item"><a href='google.com'>Bing</a></div>

</div>


enter image description here

Ответ 8

Вы можете использовать flexbox с max-width (префиксы поставщика удалены):

.container {
   display: flex;
   width: 100%;
   justify-content: space-around;
   flex-direction: row;
   flex-wrap: wrap;
}

.column {
   flex: 1 0 33.333%;
   max-width: 33.333%;
}

И HTML

<div class="container">
    <div class="column">1</div>
    <div class="column">2</div>
    <div class="column">3</div>
    <div class="column">4</div>
</div>

Просмотр в CodePen: http://codepen.io/anon/pen/gpwEJW