Flexbox / Float锚点项目到顶部

Question

考虑这个例子：

请注意，第4项被推到顶部而不是与第3项对齐。我无法使用flexbox的align-items: flex-end实现这一点，也不能使用浮点数。

我知道通过使用砌体/同位素实现这一点，但我想避免仅使用javascript进行此布局。

是否可以仅使用CSS？

Answer 1

按行分隔并为这些行添加flex

.top {
    display: flex;
    flex-direction: column;
}

.row1, .row2 {
    display: flex;
}


.box {
   background-color: green;
   margin: 20px;
   padding: 50px;
}

.one {
    height: 300px;
}

.two, .three, .four {
    height: 140px;
}

    <div class="top">

        <div class="row1">
            <div class="box one">1</div>
            <div class="box two">2</div>
        </div>
        <div class="row2">
            <div class="box three">3</div>
            <div class="box four">4</div>
        </div>

    </div>

Answer 2

是的，可以通过CSS Grid Layout：

.grid {
  display: grid;
  grid-gap: 10px 30px;
  grid-template-rows: auto 1fr auto;
}

/* styles just for demo */
.grid__item {
  background-color: #e0e0e0;
  font-size: 30px;
  padding: 10px;
}

.b, .d {
  align-self: flex-start;
}

.a {
  grid-row: 1 / span 2;
  /* setting height just for demo */
  height: 200px;
}

.b {
  grid-column: 2;
}

.c {
  grid-row: 3;
}

.d {
  grid-column: 2;
}

<div class="grid">
  <div class="grid__item a">1</div>
  <div class="grid__item b">2</div>
  <div class="grid__item c">3</div>
  <div class="grid__item d">4</div>
</div>

如果您需要IE \ Edge支持，则应使用旧的网格语法。您可以使用其他网格列和行伪造grid-gap。演示：

.grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 30px 1fr;
  grid-template-columns: 1fr 30px 1fr;
  -ms-grid-rows: auto 10px 1fr 10px auto;
  grid-template-rows: auto 10px 1fr 10px auto;
}

/* styles just for demo */
.grid__item {
  background-color: #e0e0e0;
  font-size: 30px;
  padding: 10px;
}

.b, .d {
  -ms-grid-row-align: start;
  align-self: flex-start;
}

.a {
  -ms-grid-row-span: 3;
  grid-row: 1 / span 3;
  /* setting height just for demo */ 
  height: 200px;
}

.b {
  -ms-grid-column: 3;
  grid-column: 3;
}

.c {
  -ms-grid-row: 5;
  grid-row: 5;
}

.d {
  -ms-grid-column: 3;
  grid-column: 3;
  -ms-grid-row: 3;
  grid-row: 3;
}

<div class="grid">
  <div class="grid__item a">1</div>
  <div class="grid__item b">2</div>
  <div class="grid__item c">3</div>
  <div class="grid__item d">4</div>
</div>