У меня есть простая схема 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;
}
<div class="exposegrid">
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
</div>
css
flexbox
grid-layout
Торбен Круазе
источник
источник
Ответы:
Добавить,
::after
который автоматически заполняет пространство. Не нужно загрязнять ваш HTML. Вот кодекс, показывающий это: http://codepen.io/DanAndreasson/pen/ZQXLXjисточник
justify-content: space-between;
из.grid
и удалены ,.grid:after
и он работает так же. Теперь, если вы попробовали что-то подобное, это полностью сломалось. Обратите внимание на ширину для каждого набора из 4 не добавить до 100%. В скрипте OP ширина задается в px, поэтому ваше решение не работает в этой ситуации.space-between
. Однако, когда я установилflex-basis
из.grid:after
одной и тех же размеров , как и другие элементы в сетке (за-останова, перекрывая выше по умолчанию / базовый код модуля), последнее распространение строк правильно. Кажется, работает на Safari, iOS, Firefox, Chrome (нужно протестировать IE), и мой самый большой размер строки равен 3 в моей первоначальной реализации.{ content: "";flex: 0 0 32%;max-width: 480px;}
я изменил максимальную ширину с изменениями медиазапросов, чтобы сетка была идеальной при любой ширине.Одним из методов будет вставка нескольких дополнительных элементов (максимально возможное количество элементов в строке), которым присваивается нулевая высота. Пространство все еще разделено, но лишние ряды рушатся на нет:
http://codepen.io/dalgard/pen/Dbnus
В будущем это может стать достижимым за счет использования нескольких
::after(n)
.источник
Как уже упоминалось в других постерах, не существует чистого способа выравнивания по левому краю последнего ряда с помощью flexbox (по крайней мере, согласно текущей спецификации).
Однако, для чего это стоит: с модулем CSS Grid Layout это удивительно легко создать:
В основном соответствующий код сводится к следующему:
1) Сделать элемент контейнера контейнером сетки
2) Установите сетку с автоматическими столбцами шириной 100 пикселей. (Обратите внимание на использование автозаполнения (в отличие от
auto-fit
- который (для макета из одной строки) сворачивает пустые дорожки до 0), в результате чего элементы расширяются, чтобы занять оставшееся пространство. Это приведет к оправданному «пробелу между 'макет, когда сетка имеет только одну строку, что в нашем случае не то, что мы хотим. (посмотрите эту демонстрацию, чтобы увидеть разницу между ними)).3) Установите промежутки / желоба для строк и столбцов сетки - здесь, так как нужно расположение «промежуток» - разрыв будет фактически минимальным, потому что он будет расти по мере необходимости.
4) Похоже на flexbox.
Показать фрагмент кода
Codepen Demo ( измените размер, чтобы увидеть эффект)
источник
auto-fit
ошибки Chrome 57-60 (и браузеров, основанных на его движке, например, Samsung Internet 6.0), то была ошибка, потому что в то время спецификация была немного неоднозначной . Теперь спецификация была уточнена, и новые версии Chrome отображаютсяauto-fit
правильно, но браузеры со старым движком все еще используются, поэтому, пожалуйста, будьте осторожны с этим значением.:after
псевдоэлемента может привести к нежелательным результатам в крайних случаях.Без какой-либо дополнительной разметки, просто добавление
::after
работало для меня, указав ширину столбца.С HTML, как это:
источник
flex-basis: 10em
вместо ширины.Ты не можешь Flexbox не является сеточной системой. Он не имеет языковых конструкций, чтобы делать то, что вы просите, по крайней мере, если вы используете
justify-content: space-between
. Самое близкое, что вы можете получить с Flexbox, это использовать ориентацию столбца, которая требует установки явной высоты:http://cssdeck.com/labs/pvsn6t4z (примечание: префиксы не включены)
Однако было бы проще использовать столбцы, которые лучше поддерживают и не требуют установки определенной высоты:
http://cssdeck.com/labs/dwq3x6vr (примечание: префиксы не включены)
источник
Возможное решение - использовать
justify-content: flex-start;
для.grid
контейнера ограничения по размеру для его дочерних элементов и поля для соответствующих дочерних элементов - в зависимости от желаемого количества столбцов.Для сетки из 3 столбцов базовый CSS будет выглядеть так:
Это еще одно несовершенное решение, но оно работает.
http://codepen.io/tuxsudo/pen/VYERQJ
источник
Я знаю, что здесь есть много ответов, но ... Самый простой способ сделать это с помощью
grid
вместо,flex
а такжеgrid template columns
сrepeat
иauto fills
, где вы должны установить количество пикселей, которое вы дали каждому элементу,100px
из вашего кода фрагмента.источник
Да.! Мы можем, но с некоторыми медиа-запросами & Максимальное количество столбцов предопределено .
Здесь я использую 4 столбца. Проверьте мой код:
ПРИМЕЧАНИЕ
1) Нет необходимости создавать дочерний div. Это может быть любой другой тег, такой как 'img' r, что вы хотите.
2) Если вы хотите, чтобы больше столбцов, измените медиазапросы и максимальное количество столбцов no.of.
источник
Если вам нужна сетка с некоторым пространством между элементами и элементами, начинающимися без начального пробела, то это простое решение работает:
Если вы хотите получить начальное пространство в 5px, просто удалите отрицательное поле :) Просто.
https://jsfiddle.net/b97ewrno/2/
Принятый ответ, хотя и хороший, приводит к тому, что между элементами во втором ряду нет места.
источник
Если вы хотите выровнять последний элемент по сетке, используйте следующий код:
Сетка контейнер
Предмет в сетке
Хитрость заключается в том, чтобы установить максимальную ширину элемента, равную максимальной ширине .card-grid: after.
Живая демоверсия на Codepen
источник
Можно использовать «flex-start» и добавлять поля вручную. Это требует некоторого математического взлома, но, безусловно, это легко сделать, и его легко использовать с таким препроцессором CSS, как LESS.
Смотрите, например, этот МЕНЬШИЙ миксин:
И тогда его легко можно использовать для отображения адаптивного макета сетки:
Вот пример
http://codepen.io/anon/pen/YyLqVB?editors=110
источник
Эта проблема была решена для меня с помощью сетки CSS,
Это решение применимо, только если у вас фиксированное количество столбцов, т.е. нет. элементов для отображения в одной строке
-> используя сетку, но не указав количество строк, так как количество элементов увеличивается, оно переносится в столбцы и динамически добавляет строки, в этом примере я указал три столбца
-> вам не нужно давать какую-либо позицию вашему ребенку / клеткам, поскольку это исправит то, чего мы не хотим.
источник
Эта версия является лучшим способом для блоков с фиксированной шириной:
http://codepen.io/7iomka/pen/oxxeNE
В остальных случаях - версия Далгарда
http://codepen.io/dalgard/pen/Dbnus
источник
Есть способ без flexbox, хотя вам нужно будет выполнить следующие условия. 1) Контейнер имеет прокладку. 2) Предметы одинакового размера, и вы точно знаете, сколько вы хотите за строку.
Чем меньше отступ с правой стороны контейнера, тем больше отступ справа от каждого элемента списка. Если предположить, что другие элементы в том же родительском объекте, что и у объекта списка, заполнены 0 5%, они будут заполнены ими. Вы также можете отрегулировать процентное соотношение, чтобы получить максимальный размер поля, или использовать для вычисления значений px.
Конечно, вы можете сделать то же самое без заполнения контейнера, используя nth-child (IE 9+) для удаления полей в каждом третьем блоке.
источник
Используя flexbox и несколько медиазапросов, я сделал этот небольшой обходной путь: http://codepen.io/una/pen/yNEGjv (это немного странно, но работает):
источник
Я сделал для этого миксины SCSS.
Это ссылка codepen: http://codepen.io/diana_aceves/pen/KVGNZg
Вы просто должны установить ширину элементов в процентах и количество столбцов.
Я надеюсь это тебе поможет.
источник
Вот еще пара scss mixins.
Эти миксины предполагают, что вы не собираетесь использовать js-плагины, такие как Isotope (они не соблюдают порядок разметки html, что приводит к нарушению правил CSS).
Кроме того, вы сможете в полной мере воспользоваться ими, особенно если вы пишете свои отзывчивые контрольные точки в мобильном режиме. В идеале вы будете использовать flexbox_grid () для меньшей точки останова и flexbox_cell () для следующих точек останова. flexbox_cell () позаботится о сбросе ранее установленных полей, которые больше не используются на больших точках останова.
И, кстати, до тех пор, пока вы правильно настроите свойства flex вашего контейнера, вы также можете использовать только flexbox_cell () для элементов, если вам это нужно.
Вот код:
Применение:
Очевидно, что вы должны в конечном итоге установить отступы / margin / width контейнера и нижние поля ячейки и тому подобное.
Надеюсь, поможет!
источник
Это довольно забавно, но у меня работает. Я пытался добиться последовательных интервалов / полей.
http://codepen.io/rustydev/pen/f7c8920e0beb0ba9a904da7ebd9970ae/
источник
Похоже, никто не предложил решение flex-grow для последнего пункта. Идея состоит в том, чтобы ваш последний элемент Flex занял все место с помощью flex-grow: 1.
Примечание. Это решение не является идеальным, особенно если у вас есть центрированные элементы внутри ваших изгибаемых элементов, поскольку оно будет сосредоточено на возможно огромном последнем изогнутом элементе.
источник
Это комбинация множества ответов, но она делает именно то, что мне было нужно, то есть выравнивание последнего дочернего элемента в гибком контейнере по левому краю при сохранении поведения пробела (в данном случае это три столбца раскладка).
Вот разметка:
источник
flex-grow: 0.9
вместоflex-basis
работ для любого количества столбцов. Протестировано во множестве современных браузеров - в них все работает, но в IE не работает отступ (но работает в Edge0Предполагая, что:
Установите левое поле для каждого элемента, кроме 1-го, 5-го и 9-го элемента и т. Д. Если левое поле равно 10px, то в каждой строке будет 30px поле, распределенное по 4 элементам. Процентная ширина для элемента рассчитывается следующим образом:
Это достойное решение для проблем, связанных с последним рядом flexbox.
источник
Если вы знаете ширину пробелов между элементами в строке и количество элементов в строке, это будет работать:
источник
Просто используйте трюк Jquery / Javascript, чтобы добавить пустой div:
источник
О, парень, я думаю, что нашел хорошее решение с минимальным CSS и без JS. Проверьте это:
Ключевым моментом здесь является помнить, что то, что мы пытаемся достичь, это именно то, что
text-align: justify
делает!Пустые элементы в HTML созданы для того, чтобы последняя строка отображалась идеально, без изменения внешнего вида, но может не потребоваться, учитывая то, что вы пытаетесь достичь. Для достижения идеального баланса в любой ситуации вам нужно как минимум x-4 пустых элемента, x - количество отображаемых элементов, или n-2, n - количество отображаемых столбцов.
источник
Просто добавьте несколько поддельных предметов с такими же свойствами, за исключением высоты, установленной в 0px в конце.
источник
Вы хотите выровнять
использовать
align-content: flex-start;
вместоjustify-content: space-between;
это тянет элементы в последнюю строку слева, а также равномерно распределяет пространство,
https://codepen.io/anon/pen/aQggBW?editors=1100
Решение ДэнАндерсон НЕ ДИНАМИЧНОЕ. ПЕРИОД !!
когда ширина элемента изменена с 25 на 28, Дэн Андерсон пропускает пробел между изображениями
ДэнАндерсон: https://codepen.io/anon/pen/ZwYPmB?editors=1100
динамический: https://codepen.io/anon/pen/aQggBW?editors=1100
вот что я пытался сказать. Данс взломан .....
источник
Я смог сделать это
justify-content: space-between
на контейнереисточник