Question

我的布局有2列和1个spacer列。所有列均为47％，间隔物为6％。

附件图像是当前输出。如您所见，前两个项目彼此相邻，但是右侧栏中有一个巨大的空间。如果右侧空间的高度小于左侧块的高度，我希望这些项目填充右侧空间。

我尝试设置align-self: flex-start;，以便右侧项目不会增加。但是只有一个会适合那里。目前，我的解决方案是将两个弹性列（占47％）移至包含<div>的列中。

我认为仅靠Flex即可实现，而无需额外的<div>（如果它们的高度合适）。

CSS

.flex-parent {

    display: -webkit-box;
        display: -moz-box;
        display: box;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-flow: row wrap;
        -moz-flex-flow: row wrap;
        flex-flow: row wrap;
        list-style: none;
        margin: 0;
        padding: 0;
        text-rendering: optimizespeed;
    }

    .flex-child {
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        box-flex: 0;
        -webkit-flex: 0 47%;
        -moz-flex: 0 47%;
        -ms-flex: 0 47%;
        flex: 0 47%;
        width: 47%;
        align-self: flex-start;
    }
    .flex-spacer {
            -webkit-box-flex: 0;
            -moz-box-flex: 0;
            box-flex: 0;
            -webkit-flex: 0 6%;
            -moz-flex: 0 6%;
            -ms-flex: 0 6%;
            flex: 0 6%;
            width: 6%;
            align-self: flex-start;
    }

HTML

<div class="flex-parent">
  <div class="flex-child">
      Stuff & Ting
  </div>
  <div class="flex-spacer">

  </div>
  <div class="flex-child">
      Stuff & Ting
  </div>
  <div class="flex-child">
      Stuff & Ting
  </div>
  <div class="flex-spacer">

  </div>
  <div class="flex-child">
      Stuff & Ting
  </div>
</div>

Answer 1

这可以通过为nth-child使用一些CSS并使用Flex: columns

来实现。

我从以下网站上发现了这一点：https://tobiasahlin.com/blog/masonry-with-css/

display: flex;
flex-flow: column wrap;

将确保它们按列顺序排列。

nth-child(-n+6){ order: 2; }将选择前6个

first-child{ order: 1;}重设第一个

到那时它们将整齐地流动，并且只有在空间被填满后才会包裹。

使用较高的左列和右列填充较小的项目进行伸缩

1 个答案: