Популярные ответы с меткой

13 голосов

Верстка: Float'ы или Flex'ы?

Однозначно стоит изучать flexbox в первую очередь. Единственные доводы в сторону float: старые браузеры (IE9-). поддержка и понимание работы существующего кода (на данный момент существует ...
Vadim Ovchinnikov's user avatar
9 голосов
Принятый

Flexbox item — перенос на новую строку

Перевод ответа на enSO. Примечание переводчика: flex-элемент (flex item) — непосредственный ребёнок блока с display: flex. Наиболее простое и надёжное решение — это вставка flex-элементов в ...
Vadim Ovchinnikov's user avatar
9 голосов
Принятый

Горизонтальный ul список с заполнением всего ряда, как правильно?

Нужно добавить подходящее для этого свойство flex-grow: * { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 100%; height: 100%; } .list { list-...
Arthur's user avatar
  • 4,572
8 голосов

Br не дружит с flexbox?

Таки переносит: .flexbox { display: flex; flex-wrap: wrap; border: 2px solid red; padding: 2px; } .item { width: 50px; height: 50px; margin: 2px; border: 2px solid blue; ...
Cheg's user avatar
  • 10.5k
8 голосов
Принятый

Br не дружит с flexbox?

Реализация элемента br в CSS очень хорошо известна как тайна. Различные браузеры поддерживают различные свойства для этого элемента, с разным эффектом (хотя все они поддерживают display: none, чтобы ...
Yuri's user avatar
  • 15.8k
7 голосов

Можно ли при помощи flexbox сделать так, чтобы первая колонка была фиксированной ширины, а вторая растягивалась на всю оставшуюся ширину?

Конечно можно. Примерно так: <div style="display: flex; flex-direction: row; align-content: flex-start;"> <div style="flex-grow: 0; flex-shrink: 0; border: solid 1px; padding: 3px;"&...
Sergey's user avatar
  • 6,280
7 голосов
Принятый

Правильная сетка CSS

Вам надо использовать display: inline-block для элементов и для контейнера присвоить text-align: justify;. Минимальное расстояние реализуется через padding: .container { padding: 2px; ...
Vadim Ovchinnikov's user avatar
6 голосов
Принятый

Выравнивание блоков по вертикали в несколько колонок в родителе с неизвестной высотой

1) Вариант с колонок: div { margin: 0 0 1em; background: silver; counter-increment: i; -webkit-column-break-inside: avoid; -moz-column-break-inside:avoid; -moz-page-break-...
Yuri's user avatar
  • 15.8k
6 голосов
Принятый

Как сделать одну большую картинку, а справа от неё два ряда маленьких

Отдохнул, зашел на кодпен и смог решить свою задачу самостоятельно буквально в пару строчек кода: Всё решение, в общем-то: body { background-color: rgba(5, 5, 5, 0.6); } main { ...
Arestch's user avatar
  • 139
6 голосов

Проблемы с flex-box HTML + CSS

Есть такая хорошая штука, называется masonry. Но сегодня можно воспользоваться и аналогом, это уже, например, flex или grid. Поддержка браузерами, если использовать плагин masonry, будет практически ...
Sevastopol''s user avatar
6 голосов

Сложный пропорциональный трехэлементный дизайн индикатора выполнения с использованием только CSS

Вы можете сделать как показано ниже. Я использую разные цвета, чтобы лучше увидеть результат body { margin: 100px; background: #CCC } .fullbar { background-color: blue; } .progress { ...
Alexandr_TT's user avatar
5 голосов
Принятый

Построение нестандартной сетки на флексах

У меня не получилось сделать это на чистых флексах без хака с отрицательным маргином, но получилось сделать с ним и резиново. Может быть вам поможет: http://codepen.io/rqrqrqrq/pen/WxxLQG, контейнер ...
rqrqrqrq's user avatar
5 голосов
Принятый

Можно ли, используя flex с space-between, расположить последнюю строчку с привязкой слева?

Для случая когда нужно симулировать добавление всего лишь одного элемента (как в примере) можно воспользоваться псевдоклассом для контейнера .flex:after { content: ""; width: 30%; } Также можно ...
Vadim Ovchinnikov's user avatar
5 голосов

Правильная сетка CSS

Если я вас правильно понял, то всё решается таким способом .flexbox { display: flex; width: 312px; max-width: 370px; padding: 2px; border: 3px solid #464646; background-color: ...
Yuri's user avatar
  • 15.8k
5 голосов

Правильная сетка CSS

1) Попробуйте грид На каждой строке поместится максимум блоков, последняя строка встанет по общему левому краю, а весь массив блоков выровняется по центру страницы. Вот короткое ...
Gleb Kemarsky's user avatar
5 голосов
Принятый

Два div по центру одного flex?

Вы можете получить данное положение через отрицательные margin. При этом помните, что для элементов flex можно задавать z-index, которые будут работать даже без абсолютного позиционирования, определяя ...
Vadim Ovchinnikov's user avatar
5 голосов
Принятый

Ширина дочерних элементов flexbox

То, чего вы хотите добиться средствами чистого CSS, возможно, но флексбокс тут не поможет, потому что он одномерный и для полноценной сетки не годится. Воспользуйтесь для этого display: grid, а ...
Sasha Omelchenko's user avatar
5 голосов

Flexbox item — перенос на новую строку

Во flexbox, к сожалению, не силен, но вот такой трюк помню: .flex { display: flex; flex-wrap: wrap; border: 2px solid red; } .item { width: 50px; height: 50px; margin: 5px; ...
Cheg's user avatar
  • 10.5k
5 голосов

Flexbox item — перенос на новую строку

Решил с помощью добавления элемента разрыва .flex { display: flex; flex-wrap: wrap; border: 2px solid red; } .item { width: 50px; height: 50px; margin: 5px; border: 2px ...
Yuri's user avatar
  • 15.8k
5 голосов
Принятый

Как выравнивать блоки по центру не сломав wrap?

.main { display: grid; grid-gap: 10px; grid-template-columns: repeat(auto-fill, 170px); max-width: 890px; margin: auto; justify-content: center; } .box { height: 130px; ...
Sasha Omelchenko's user avatar
5 голосов
Принятый

Как сделать одинаковый отступ между элементами, но кроме краев контейнера?

Не флексбоком единым. Есть ещё грид. .container { display: grid; grid-template-columns: repeat(auto-fit, 75px); grid-gap: 20px; justify-content: space-between; width: 500px; ...
Kyubey's user avatar
  • 31.6k
5 голосов

Как сделать одну большую картинку, а справа от неё два ряда маленьких

На display: grid когда-то писал даже с фильтрацией https://github.com/kliford/Portfolio-Slider .new1 { display: grid; grid-gap: 10px; grid-template-columns: repeat(4, 1fr); grid-auto-...
klifort's user avatar
  • 1,365
5 голосов

Можно ли как то 3 блока оставить flex-start, а один сделать flex-end?

Нет, но можно между ними вставить блок, для раздвижки. .box { width: 31px; height: 33px; background: red; margin: 1px; } .prostokat { display: flex; align-...
Nazar Kalytiuk's user avatar
5 голосов
Принятый

Выравнивание элементов из разных дивов

Флексбокс позволяет использовать order, а ещё в css есть (с сомнительной поддержкой) display: contents. Совмещаем и, теоретически, должно работать: body { display: flex; } section { ...
Qwertiy's user avatar
  • 121k
5 голосов
Принятый

Flexbox - 3 колонки одинаковой ширины

Для трёх колонок с отступом между блоками в 20px *{ box-sizing:border-box; } body{ margin:0; } .flex{ display:flex; flex-wrap:wrap; } .item{ height:60px; background-color:#...
zhurof's user avatar
  • 10.4k
5 голосов
Принятый

в flexbox контейнере образуется не ясный отступ

Потому что картинка - это текст, она выравнивается по базовой линии текста, а между ней и низом строки есть зазор. Чтобы этого избежать, надо изменить vertical-align или display. div { float: ...
Qwertiy's user avatar
  • 121k
5 голосов
Принятый

Justify content start если строка не заполнена

Если вы хотите, чтобы элементы шли один за другим с одинаковыми промежутками — не обязательно использовать justify-content: space-between. В вашем примере элементы, шириной 24% расположены по 4 в ряд ...
zhurof's user avatar
  • 10.4k
5 голосов
Принятый

Как реализвать блок с flex-ами?

Как например: * { box-sizing: border-box; } ul { list-style-type: none; padding: 0; margin: 0; display: flex; flex-flow: row wrap; align-items: center; justify-...
SVE's user avatar
  • 22.4k
5 голосов
Принятый

Как есть альтернатива flex-direction: column-reverse

извращение) .container { transform: rotate(180deg); } .item { transform: rotate(180deg); } <div class="container"> <div class="item">1</div> <div class="...
WVFFLIFE's user avatar
  • 1,344
5 голосов
Принятый

Проблемы с flex-box HTML + CSS

Старый и добрый column-count который принимает не ограниченное количество высоты и который 100% поддерживается везде и сам пересчитывает Вот здесь можно экран сужать/расширять: https://codepen.io/...
Monkey Mutant's user avatar

Only top scored, non community-wiki answers of a minimum length are eligible