Я пытаюсь создать горизонтальный макет с использованием только CSS и flexbox. Проблема, с которой я сталкиваюсь, есть вертикальные промежутки между элементами, без использования align-left: stretch; можно ли закрыть пробелы?
.card-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
}
.card {
width: 25%;
flex: 1 0 auto;
}
Вот один из вариантов использования обернутых столбцов, но для него требуется фиксированная высота.
.card-container {
display: flex;
flex-flow: column wrap;
height:100vh;
align-items: center;
background-color: #888;
}
Лучшим вариантом для макета CSS-кластеров является использование столбцов, например, в этом сообщении в блоге http://w3bits.com/css-masonry/
.masonry { /* Masonry container */
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
column-gap: 1em;
}
.item { /* Masonry bricks or child elements */
background-color: #eee;
display: inline-block;
margin: 0 0 1em;
width: 100%;
}
Обертка Flex-пакета обертывает переполняющие элементы в новую строку. Эта новая строка имеет, как и предыдущую строку, высоту самого высокого гибкого ребенка. Он не позволит элементам в строке выйти за пределы границ строк.
Так что, к сожалению, вы не можете закрыть вертикальные зазоры с помощью flexbox.