仅使用 flexbox CSS 的水平砌体布局[重复]

Posted 2023-03-06

【中文标题】仅使用 flexbox CSS 的水平砌体布局[重复]

【英文标题】：Horizontal masonry layout with flexbox CSS only [duplicate]

【发布时间】：2015-04-25 05:40:25

【问题描述】：

我正在尝试仅使用 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;

full codepen here

【问题讨论】：

哪些元素之间的垂直间隙？

在卡片 2 和 5 之间。我试图让它们像这样对齐：codepen masonry

只是一个提高你的问题和可读性的建议：包括你的代码的相关部分。

感谢您的提示，完成。

【参考方案1】：

这是使用包装列的一种选择，但它需要固定高度。

.card-container 
  display: flex;
  flex-flow: column wrap;
  height:100vh;
  align-items: center;
  background-color: #888;

CSS masonry 布局的更好选择是使用列，此博客文章中有一个示例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%;

【讨论】：

我喜欢你的解决方案！我假设块必须从左到右流动。在您的情况下，它们从上到下流动。

列并不是一个更好的解决方案，因为列使最新的项目从左列向下，而不是最新的项目从左向右列出然后向下

这是解决问题的方法（CSS，没有垂直间距，砖石布局）***.com/a/25668648/871781

【参考方案2】：

Flex box wrap 将溢出的元素包装到一个新行。就像前一行一样，这个新行具有其中最高 flex 子项的高度。它不会让行中的元素超出行边界。

不幸的是，不，你不能用 flexbox 关闭垂直间隙。