13
голосов
Верстка: Float'ы или Flex'ы?
Однозначно стоит изучать flexbox в первую очередь.
Единственные доводы в сторону float:
старые браузеры (IE9-).
поддержка и понимание работы существующего кода (на данный момент существует ...
9
голосов
Принятый
Flexbox item — перенос на новую строку
Перевод ответа на enSO.
Примечание переводчика: flex-элемент (flex item) — непосредственный ребёнок блока с display: flex.
Наиболее простое и надёжное решение — это вставка flex-элементов в ...
9
голосов
Принятый
Горизонтальный ul список с заполнением всего ряда, как правильно?
Нужно добавить подходящее для этого свойство flex-grow:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
}
.list {
list-...
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;
...
8
голосов
Принятый
Br не дружит с flexbox?
Реализация элемента br в CSS очень хорошо известна как тайна. Различные браузеры поддерживают различные свойства для этого элемента, с разным эффектом (хотя все они поддерживают display: none, чтобы ...
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;"&...
7
голосов
Принятый
Правильная сетка CSS
Вам надо использовать display: inline-block для элементов и для контейнера присвоить text-align: justify;. Минимальное расстояние реализуется через padding:
.container {
padding: 2px;
...
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-...
6
голосов
Принятый
Как сделать одну большую картинку, а справа от неё два ряда маленьких
Отдохнул, зашел на кодпен и смог решить свою задачу самостоятельно буквально в пару строчек кода:
Всё решение, в общем-то:
body {
background-color: rgba(5, 5, 5, 0.6);
}
main {
...
6
голосов
Проблемы с flex-box HTML + CSS
Есть такая хорошая штука, называется masonry. Но сегодня можно воспользоваться и аналогом, это уже, например, flex или grid. Поддержка браузерами, если использовать плагин masonry, будет практически ...
6
голосов
Сложный пропорциональный трехэлементный дизайн индикатора выполнения с использованием только CSS
Вы можете сделать как показано ниже. Я использую разные цвета, чтобы лучше увидеть результат
body {
margin: 100px;
background: #CCC
}
.fullbar {
background-color: blue;
}
.progress {
...
5
голосов
Принятый
Построение нестандартной сетки на флексах
У меня не получилось сделать это на чистых флексах без хака с отрицательным маргином, но получилось сделать с ним и резиново. Может быть вам поможет: http://codepen.io/rqrqrqrq/pen/WxxLQG, контейнер ...
5
голосов
Принятый
Можно ли, используя flex с space-between, расположить последнюю строчку с привязкой слева?
Для случая когда нужно симулировать добавление всего лишь одного элемента (как в примере) можно воспользоваться псевдоклассом для контейнера
.flex:after {
content: "";
width: 30%;
}
Также можно ...
5
голосов
Правильная сетка CSS
Если я вас правильно понял, то всё решается таким способом
.flexbox {
display: flex;
width: 312px;
max-width: 370px;
padding: 2px;
border: 3px solid #464646;
background-color: ...
5
голосов
Правильная сетка CSS
1) Попробуйте грид
На каждой строке поместится максимум блоков, последняя строка встанет по общему левому краю, а весь массив блоков выровняется по центру страницы.
Вот короткое ...
5
голосов
Принятый
Два div по центру одного flex?
Вы можете получить данное положение через отрицательные margin. При этом помните, что для элементов flex можно задавать z-index, которые будут работать даже без абсолютного позиционирования, определяя ...
5
голосов
Принятый
Ширина дочерних элементов flexbox
То, чего вы хотите добиться средствами чистого CSS, возможно, но флексбокс тут не поможет, потому что он одномерный и для полноценной сетки не годится. Воспользуйтесь для этого display: grid, а ...
5
голосов
Flexbox item — перенос на новую строку
Во flexbox, к сожалению, не силен, но вот такой трюк помню:
.flex {
display: flex;
flex-wrap: wrap;
border: 2px solid red;
}
.item {
width: 50px;
height: 50px;
margin: 5px;
...
5
голосов
Flexbox item — перенос на новую строку
Решил с помощью добавления элемента разрыва
.flex {
display: flex;
flex-wrap: wrap;
border: 2px solid red;
}
.item {
width: 50px;
height: 50px;
margin: 5px;
border: 2px ...
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;
...
5
голосов
Принятый
Как сделать одинаковый отступ между элементами, но кроме краев контейнера?
Не флексбоком единым. Есть ещё грид.
.container {
display: grid;
grid-template-columns: repeat(auto-fit, 75px);
grid-gap: 20px;
justify-content: space-between;
width: 500px;
...
5
голосов
Как сделать одну большую картинку, а справа от неё два ряда маленьких
На display: grid когда-то писал даже с фильтрацией https://github.com/kliford/Portfolio-Slider
.new1 {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(4, 1fr);
grid-auto-...
5
голосов
Можно ли как то 3 блока оставить flex-start, а один сделать flex-end?
Нет, но можно между ними вставить блок, для раздвижки.
.box
{
width: 31px;
height: 33px;
background: red;
margin: 1px;
}
.prostokat
{
display: flex;
align-...
5
голосов
Принятый
Выравнивание элементов из разных дивов
Флексбокс позволяет использовать order, а ещё в css есть (с сомнительной поддержкой) display: contents. Совмещаем и, теоретически, должно работать:
body {
display: flex;
}
section {
...
5
голосов
Принятый
Flexbox - 3 колонки одинаковой ширины
Для трёх колонок с отступом между блоками в 20px
*{
box-sizing:border-box;
}
body{
margin:0;
}
.flex{
display:flex;
flex-wrap:wrap;
}
.item{
height:60px;
background-color:#...
5
голосов
Принятый
в flexbox контейнере образуется не ясный отступ
Потому что картинка - это текст, она выравнивается по базовой линии текста, а между ней и низом строки есть зазор. Чтобы этого избежать, надо изменить vertical-align или display.
div {
float: ...
5
голосов
Принятый
Justify content start если строка не заполнена
Если вы хотите, чтобы элементы шли один за другим с одинаковыми промежутками — не обязательно использовать justify-content: space-between.
В вашем примере элементы, шириной 24% расположены по 4 в ряд ...
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-...
5
голосов
Принятый
Как есть альтернатива flex-direction: column-reverse
извращение)
.container {
transform: rotate(180deg);
}
.item {
transform: rotate(180deg);
}
<div class="container">
<div class="item">1</div>
<div class="...
5
голосов
Принятый
Проблемы с flex-box HTML + CSS
Старый и добрый column-count который принимает не ограниченное количество высоты и который 100% поддерживается везде и сам пересчитывает
Вот здесь можно экран сужать/расширять: https://codepen.io/...
Only top scored, non community-wiki answers of a minimum length are eligible
Связанные метки
flexbox × 849css × 745
html × 522
css3 × 168
вёрстка × 129
html5 × 76
адаптивная-верстка × 28
grid × 28
javascript × 26
bootstrap × 26
css-grid × 22
position × 13
internet-explorer × 11
веб-программирование × 10
jquery × 9
bootstrap4 × 9
выравнивание × 9
scss × 8
float × 8
layout × 8
reactjs × 7
safari × 7
media-queries × 7
responsive × 7
width × 7