垂直对齐弹性盒

Question

我正尝试使用flexbox将子元素放在父元素中，如下图所示-> https://ibb.co/Wpph8fP。

我知道这样做是可能的，方法是先做三列，然后使用flex，然后在第一列中使用flex-column，然后将其他两列垂直居中。

问题是，我需要在一个父div中执行此操作。包裹了第四个元素，并使用第一个元素创建了列，然后我需要将其他两个元素垂直居中。

这是我已经做的：

the code is here https://codepen.io/MrEyelet/pen/wLxygN?editors=1100

Answer 1

1. 要使用一个flex，首先将flex-direction设置为列，并将wrap设置为flex-wrap。

2. 并且，需要在两条线上的零件的高度可变，以避免换行。

3. 接下来，将flex属性设置为none，并设置margin足以在需要在一行上的部分中换行。这将迫使弹性物品破裂并保持物品的大小。

     

   flex-值 ^[mdn]

        

   none   根据项目的width和height属性调整大小。它是完全不灵活的：相对于flex容器，它既不收缩也不增长。这等效于设置"flex: 0 0 auto"。

body {
  background: tomato;
  margin: 0;
}

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column wrap;
  height: 100vh;
}

.child {
  width: 30%;
  height: 200px;
  margin: 20px 0;
  background: indigo;
}


/* add below */
.child:nth-of-type(-n+2) {
  flex: 1 0 calc(50% - 40px);
}


/* add below */
.child:nth-of-type(n+3) {
  flex: none;
  margin: 50% 0;
}

<div class="parent">
  <div class="child child-1">
  </div>
  <div class="child child-2">
  </div>
  <div class="child child-3">
  </div>
  <div class="child child-4">
  </div>
</div>