Flex-box: выровнять последний ряд по сетке

У меня есть простая схема flex-box с контейнером, как:

.grid {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

Теперь я хочу, чтобы элементы в последнем ряду были выровнены с другим.justify-content: space-between; следует использовать, потому что ширина и высота сетки могут быть скорректированы.

В настоящее время это выглядит как

Здесь я хочу, чтобы элемент в правом нижнем углу был всредняя колонка, Какой самый простой способ сделать это? Вот маленькийjsfiddle это показывает это поведение.

.exposegrid {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.exposetab {
  width: 100px;
  height: 66px;
  background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 5px;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  margin-bottom: 10px;
}

  
  
  
  
  
  
  
  
  
  
  
  
  
  

Ответы на вопрос(24)

Используя flexbox и несколько медиа-запросов, я сделал этот небольшой обходной путь:http://codepen.io/una/pen/yNEGjv (это немного странно, но работает):

.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  max-width: 1200px;
  margin: 0 auto;
}

.item {
  background-color: gray;
  height: 300px;
  flex: 0 30%;
  margin: 10px;

  @media (max-width: 700px) {
     flex: 0 45%;
  }

  @media (max-width: 420px) {
    flex: 0 100%;
  }

  &:nth-child(3n-1) {
    margin-left: 10px;
    margin-right: 10px;
  }
}

Есть способ без flexbox, хотя выЯ должен соответствовать следующим условиям. 1) Контейнер имеет прокладку. 2) Предметы одинакового размера, и вы точно знаете, сколько вы хотите за строку.

ul {
  padding: 0 3% 0 5%;
}
li {
  display: inline-block; 
  padding: 0 2% 2% 0;
  width: 28.66%;
}

Меньшее заполнение на правой стороне контейнера позволяет выполнять дополнительное заполнение справа от каждого элемента списка. Если предположить, что другие элементы в том же родительском объекте, что и у объекта списка, заполнены 0 5%, они будут заполнены ими. Вы также можете отрегулировать проценты, чтобы получить максимальную маржуМне нравится или использовать вычислить значения px.

Конечно, вы можете сделать то же самое без заполнения контейнера, используя nth-child (IE 9+) для удаления полей в каждом третьем блоке.

О, парень, я думаю, что нашел хорошее решение с минимальным CSS и без JS. Проверьте это:

img {width:100%;}
li {
  display: inline-block;
  width:8em;
  list-style:none;
}
ul {text-align: justify;}

  
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg">
  
  
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg">
  
  
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg">
  
  
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg">
  
  
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg">
  
  
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg">
  
  
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg">
  
  
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg">
  
  
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg">
  
  
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg">
  
  
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg">
  
  
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg">
  
  
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg">
  
  
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg">
  
  
  
  
  
  
  
  

Ключевым моментом здесь является помнить, что то, что мы пытаемся достичь, это именно то, чтоtext-align: justify делает!

Пустые элементы в HTML созданы для того, чтобы последняя строка отображалась идеально, без изменения внешнего вида, но может не потребоваться, учитывая то, что вы пытаетесь достичь. Для идеального баланса в любой ситуации вам нужно как минимум x-4 пустых элемента, x - это количество отображаемых элементов, или n-2, n - это количество столбцов, которые вы хотите отобразить.

Добавить::after который заполняет пространство. Не нужно загрязнять ваш HTML. Вот кодекс, показывающий это:http://codepen.io/DanAndreasson/pen/ZQXLXj

.grid {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.grid::after {
  content: "";
  flex: auto;
}

Как уже упоминалось в других плакатах,нет чистого способа выравнивания по левому краю последней строки с помощью flexbox (по крайней мере, согласно текущей спецификации)

Однако за что этоS стоит: сМодуль CSS Grid Layout это удивительно легко произвести:

В основном соответствующий код сводится к следующему:

ul {
  display: grid; /* 1 */
  grid-template-columns: repeat(auto-fill, 100px); /* 2 */
  grid-gap: 1rem; /* 3 */
  justify-content: space-between; /* 4 */
}

1) Сделать элемент контейнера контейнером сетки

2) Установите сетку с автоматическими столбцами шириной 100 пикселей. (Обратите внимание на использованиеавтоматическое заполнение (по сравнению сauto-fit - который (для макета из одной строки) сворачивает пустые дорожки в 0 - заставляя элементы расширяться, чтобы занять оставшееся пространство. Это привело бы к оправданномупространство между ними» макет, когда сетка имеет только одну строку, что в нашем случае не то, что мы хотим. (проверять, выписыватьсяэто демо чтобы увидеть разницу между ними)).

3) Установите промежутки / желоба для строк и столбцов сетки - здесь, так как хотите 'пространство между ними» макет - разрыв будет фактически минимальным, потому что он будет расти по мере необходимости.

4) Похоже на flexbox.

ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
  grid-gap: 1rem;
  justify-content: space-between;
  
  /* boring properties */
  list-style: none;
  background: wheat;
  padding: 2rem;
  width: 80vw;
  margin: 0 auto;
}

li {
  height: 50px;
  border: 1px solid green;
}

  
  
  
  
  
  
  

Codepen Demo (Изменить размер, чтобы увидеть эффект)

Если вы хотите выровнять последний элемент по сетке, используйте следующий код:

Сетка контейнер

.card-grid {
  box-sizing: border-box;
  max-height: 100%;
  display: flex;
  flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  justify-content: space-between;
  align-items: stretch;
  align-content: stretch;
  -webkit-box-align: stretch;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
}

.card-grid:after {
  content: "";
  flex: 1 1 100%;
  max-width: 32%;
}

Предмет в сетке

.card {
  flex: 1 1 100%;
  box-sizing: border-box;
  -webkit-box-flex: 1;
  max-width: 32%;
  display: block;
  position: relative;

}

Хитрость заключается в том, чтобы установить максимальную ширину элемента, равную максимальной ширине .card-grid: after.

Живая демоверсия на Codepen

Вы можете добиться этого просто с помощью flex-start и max-width.

https://codepen.io/moladukes/pen/NvzBrQ

.container {
  display: flex;
  justify-content: flex-start;
  flex-flow: row wrap;
}

.item { 
  width: 130px; 
  max-width: 130px; 
  height: 180px; 
  background: red; 
  margin: 20px; 
}

Да.! Мы можем, но с некоторыми медиа-запросами и Максимальное количество столбцов предопределено.

Здесь я использую 4 столбца. Проверьте мой код:

.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 {
  display: flex;
  display: -webkit-flex;
  display: -moz-flex;
  justify-content: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  flex-basis: 25%; //max no of columns in %, 25% = 4 Columns
}

.container .item .item-child {
  width: 130px;
  height: 180px;
  background: red;
  margin: 10px;
}

@media (max-width: 360px) {
  .container .item {
    flex-basis: 100%;
  }
}

@media (min-width:360px) and (max-width: 520px) {
  .container .item {
    flex-basis: 50%;
  }
}

@media (min-width:520px) and (max-width: 680px) {
  .container .item {
    flex-basis: 33.33%;
  }
}


  
    1
  
  
    
  
  
    
  
  
    
  
  
    
  
  
    
  
  
    
  
  
    
  
  
    
  
  
    
  
  
    
  
  
    
  
  
    
  
  
    
  
  
    
  
  
    
  
  
    
  
  
    
  
  
    
  
  
    
  
  
    
  
  
    
  
  
    
  

НОТА

1) Не нужно создавать дочерние div. Это может быть любой другой тег вродеIMG» т все, что вы хотите ..

2) Если вы хотите больше столбцов, настройте медиазапросы и максимальное количество столбцов.

ты хочешьвыравнивать

использованиеalign-content: flex-start; вместоjustify-content: space-between;

это тянет элементы в последнюю строку слева, а также равномерно распределяет пространство,

.container {
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
  /*justify-content: space-between; remove this line!!!! */ 
}

https://codepen.io/anon/pen/aQggBW?editors=1100

Решение ДанАндерсон НЕ ДИНАМИЧНОЕ. ПЕРИOD !!

когда ширина элемента изменена с 25 на 28, Дэн Андерсон пропускает пробел между изображениями

danAnderson:https://codepen.io/anon/pen/ZwYPmB?editors=1100

динамическая:https://codepen.io/anon/pen/aQggBW?editors=1100

вот что я пытался сказать. Данс взломан .....

Можно использоватьFlex-старт» и добавить поля вручную. Это требует некоторого математического взлома, но, безусловно, это легко сделать, и его легко использовать с таким препроцессором CSS, как LESS.

Посмотрите, например, этот МЕНЬШИЙ миксин:

.flexboxGridMixin(@columnNumber,@spacingPercent) {
  @contentPercent: 100% - @spacingPercent;
  @sideMargin: @spacingPercent/(@columnNumber*2);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  > * {
    box-sizing: border-box;
    width: @contentPercent/@columnNumber;
    margin-left: @sideMargin;
    margin-right: @sideMargin;
  }
}

И тогда его можно легко использовать для отображения адаптивного макета сетки:

ul {
  list-style: none;
  padding: 0;
  @spacing: 10%;
  @media only screen and (max-width: 499px) { .flexboxGridMixin(1,@spacing); }
  @media only screen and (min-width: 500px) { .flexboxGridMixin(2,@spacing); }
  @media only screen and (min-width: 700px) { .flexboxGridMixin(3,@spacing); }
  @media only screen and (min-width: 900px) { .flexboxGridMixin(4,@spacing); }
  @media only screen and (min-width: 1100px) { .flexboxGridMixin(5,@spacing); }
}

li {
  background: pink;
  height: 100px;
  margin-top: 20px;
}

Вот пример

http://codepen.io/anon/pen/YyLqVB?editors=110

Возможным решением является использованиеjustify-content: flex-start; на.grid контейнер, ограничения по размеру для его дочерних элементов и поля наподходящее дочерние элементы - в зависимости от желаемого количества столбцов.

Для сетки из 3 столбцов базовый CSS будет выглядеть так:

.grid {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
}

.grid > * {
    flex: 0 0 32%;
    margin: 1% 0;
}

.grid > :nth-child(3n-1) {
    margin-left: 2%;
    margin-right: 2%;
}

Это'Еще одно несовершенное решение, но оно работает.

http://codepen.io/tuxsudo/pen/VYERQJ

Похоже, никто не предложил решение flex-grow для последнего пункта. Идея состоит в том, чтобы ваш последний элемент Flex занял все место с помощью flex-grow: 1.

.grid {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.grid > *:last-child {
  flex-grow: 1;
}

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

Я знаю, что здесь есть много ответов, но .. Самый простой способ сделать это сgrid вместоflex а такжеgrid template columns сrepeat а такжеauto fillsгде вы должны установить количество пикселей, которые вы дали каждому элементу,100px из вашего кода фрагмента.

.exposegrid {
     display: grid;
     grid-template-columns: repeat(auto-fill, 100px);
     justify-content: space-between;
}
 .exposetab {
     width: 100px;
     height: 66px;
     background-color: rgba(255, 255, 255, 0.2);
     border: 1px solid rgba(0, 0, 0, 0.4);
     border-radius: 5px;
     box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
     margin-bottom: 10px;
}

   
   
   
   
   
   
   
   
   
   
   
   
   
   

Я сделал для этого миксины SCSS.

@mixin last-row-flexbox($num-columns, $width-items){

  $filled-space: $width-items * $num-columns;
  $margin: calc((100% - #{$filled-space}) / (#{$num-columns} - 1));

  $num-cols-1 : $num-columns - 1;

  &:nth-child(#{$num-columns}n+1):nth-last-child(-n+#{$num-cols-1}) ~ & {
    margin-left: $margin;
  }
  @for $i from 1 through $num-columns - 2 { 
    $index: $num-columns - $i;
    &:nth-child(#{$num-columns}n+#{$index}):last-child{
      margin-right: auto;
    }
  }
}

Это ссылка на кодовый блок:http://codepen.io/diana_aceves/pen/KVGNZg

Вы просто должны установить ширину элементов в процентах и количество столбцов.

Я надеюсь это тебе поможет.

Одним из методов будет вставка нескольких дополнительных элементов (максимально возможное количество элементов в строке), которым присваивается нулевая высота. Пространство все еще разделено, но лишние ряды рушатся на нет:

http://codepen.io/dalgard/pen/Dbnus

body {
  padding: 5%;
}

div {
  overflow: hidden;
  background-color: yellow;
}

ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -4px -4px 0;
  list-style: none;
  padding: 0;
}

li {
  flex: 1 0 200px;
  height: 200px;
  border-right: 4px solid black;
  border-bottom: 4px solid black;
  background-color: deeppink;
}
li:empty {
  height: 0;
  border: none;
}

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

  
    a
    b
    c
    d
    e
    f
    g
    h
    i
    j
    k
    
    
    
    
    
    
    
    
    
    
  

В будущем это может стать достижимым за счет использования нескольких.::after(n)

Без какой-либо дополнительной разметки, просто добавив::after работал для меня, указав ширину столбца.

.grid {
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
}
.grid::after{
  content: '';
  width: 10em // Same width of .grid__element
}
.grid__element{
  width:10em;
}

С HTML, как это:

Это довольно забавно, но у меня работает. Я пытался добиться последовательных интервалов / полей.

.grid {
  width: 1024px;
  display: flex;
  flex-flow: row wrap;
  padding: 32px;
  background-color: #ddd;  

  &:after {
    content: "";
    flex: auto;
    margin-left:-1%;
  }

  .item {
    flex: 1 0 24.25%;
    max-width: 24.25%;
    margin-bottom: 10px;
    text-align: center;
    background-color: #bbb;

    &:nth-child(4n+2),
    &:nth-child(4n+3),
    &:nth-child(4n+4) {
      margin-left: 1%;
    }

    &:nth-child(4n+1):nth-last-child(-n+4),
      &:nth-child(4n+1):nth-last-child(-n+4) ~ .item {
        margin-bottom: 0;
    }    

  }
}

http://codepen.io/rustydev/pen/f7c8920e0beb0ba9a904da7ebd9970ae/

Эта версия является лучшим способом для блоков с фиксированной шириной:

http://codepen.io/7iomka/pen/oxxeNE

В остальных случаях - версия Далгарда

http://codepen.io/dalgard/pen/Dbnus

body {
  padding: 5%;
}

div {
  overflow: hidden;
  background-color: yellow;
}

ul {
  display: flex;
  flex-wrap: wrap;
justify-content:center;
  margin: 0 -4px -4px 0;
  list-style: none;
  padding: 0;
}

li {
  flex: 1 0 200px;
  height: 200px;
  max-width:200px;
  min-width:200px;
  border-right: 4px solid black;
  border-bottom: 4px solid black;
  background-color: deeppink;
}
li:empty {
  height: 0;
  border: none;
}

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

  
    a
    b
    c
    d
    e
    f
    g
    h
    i
    j
    k
    
    
    
    
    
    
    
    
    
    
  

Вот'Еще одна пара scss mixins.

Эти миксины предполагают, что вы не собираетесь использовать js-плагины, такие как Isotope (они неНе соблюдайте порядок разметки html, таким образом, нарушая правила CSS.

Кроме того, вы сможете в полной мере воспользоваться ими, особенно если выпереписываете свои отзывчивые контрольные точки мобильным способом. В идеале вы будете использовать flexbox_grid () для меньшей точки останова и flexbox_cell () для следующих точек останова. flexbox_cell () позаботится о сбросе ранее установленных полей, которые больше не используются на больших точках останова.

И, кстати, до тех пор, пока вы правильно настроили свой контейнерБлагодаря свойствам flex, вы также можете использовать только flexbox_cell () для элементов, если это необходимо.

Вот's код:

// apply to the container (for ex.  element)
@mixin flexbox_grid($columns, $gutter_width){

  display: flex;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content: flex-start;

  > *{
    @include flexbox_cell($columns, $gutter_width);
  }
}

// apply to the cell (for ex. a  element)
@mixin flexbox_cell($columns, $gutter_width){
  $base_width: 100 / $columns;
  $gutters: $columns - 1;
  $gutter_offset: $gutter_width * $gutters / $columns;

  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto; // IE10 doesn't support calc() here

  box-sizing:border-box; // so you can freely apply borders/paddings to items
  width: calc( #{$base_width}% - #{$gutter_offset} );

  // remove useless margins (for cascading breakponts)
  &:nth-child(#{$columns}n){
    margin-right: 0;
  }

  // apply margin
  @for $i from 0 through ($gutters){
    @if($i != 0){
      &:nth-child(#{$columns}n+#{$i}){
        margin-right: $gutter_width;
      }
    }
  }
}

Использование:

ul{
   // just this:
   @include flexbox_grid(3,20px);
}

// and maybe in following breakpoints, 
// where the container is already setted up, 
// just change only the cells:

li{
   @include flexbox_cell(4,40px);
}

Очевидно, этоВам решать в конечном итоге установить контейнерs padding / margin / width и cell 'нижние поля и тому подобное.

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

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

.grid {
    display: flex;
    flex-flow: row wrap;
    margin: 0 -5px; // remove the inital 5px space
    width: auto;
}
.grid__item {
    width: 25%;
    padding: 0 5px; // should be same as the negative margin above.
}

Если вы хотите получить начальное пространство в 5px, просто удалите отрицательное поле :) Просто.

https://jsfiddle.net/b97ewrno/2/

Принятый ответ, хотя и хороший, приводит к тому, что между элементами во втором ряду нет места.

Предполагая, что:

Вы хотите 4 столбца сетки с оберткойКоличество предметов не обязательно кратно 4

Установите левое поле для каждого элемента, кроме 1-го, 5-го и 9-го элемента и т. Д. Если левое поле равно 10px, то в каждой строке будет 30px поле, распределенное по 4 элементам. Процентная ширина для элемента рассчитывается следующим образом:

100% / 4 - horizontal-border - horizontal-padding - left-margin * (4 - 1) / 4

Это достойное решение для проблем, связанных с последним рядом flexbox.

.flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 1em 0 3em;
  background-color: peachpuff;
}

.item {
  margin-left: 10px;
  border: 1px solid;
  padding: 10px;
  width: calc(100% / 4 - 2px - 20px - 10px * (4 - 1) / 4);
  background-color: papayawhip;
}

.item:nth-child(4n + 1) {
  margin-left: 0;
}

.item:nth-child(n + 5) {
  margin-top: 10px;
}

  1
  2
  3
  4


  1
  2
  3
  4
  5
  6


  1
  2
  3
  4
  5
  6
  7
  8
  9

Вы можете'т. Flexbox не является сеточной системой. У него нет языковых конструкций, чтобы делать то, что выпросим, по крайней мере, если выповторное использованиеjustify-content: space-between, Самое близкое, что вы можете получить с Flexbox, это использовать ориентацию столбца, которая требует установки явной высоты:

http://cssdeck.com/labs/pvsn6t4z (примечание: префиксы не включены)

ul {
  display: flex;
  flex-flow: column wrap;
  align-content: space-between;
  height: 4em;
}

Однако было бы проще использовать столбцы, которые лучше поддерживают и неt требует установки определенной высоты:

http://cssdeck.com/labs/dwq3x6vr (примечание: префиксы не включены)

ul {
  columns: 15em;
}

Это комбинация множества ответов, но она делает именно то, что мне было нужно - то есть выравнивание последнего потомка в гибком контейнере по левому краю при сохранении поведения пробела (в данном случае это 'с тремя колонками).

Вот'Разметка:

.flex-container {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}

.flex-container:after {
  content: "";
  flex-basis: 30%;
}

Я смог сделать это сjustify-content: space-between на контейнере

ВАШ ОТВЕТ НА ВОПРОС