时间戳

首页 > 解决方案 > 垂直对齐弹性盒

html - 垂直对齐弹性盒

问题描述

我正在尝试使用此图像中的 flexbox 将子元素放置在父元素中 - > https://ibb.co/Wpph8fP。

我知道这可以通过做三列然后使用 flex，然后在第一列中使用 flex-column 并垂直居中其他两列来实现。

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

这是我已经做过的：

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

标签： htmlcssflexboxvertical-alignmentcentering

解决方案

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

  2. 而且，需要在两行上的部分具有可变高度以避免换行。

  3. 接下来，将flex属性设置为none，设置margin到足以在需要位于一行的部分中换行。这将强制弹性项目打破并保持项目的大小。

    flex - 值[mdn]

    none 该项目的大小根据其width和height属性。它是完全不灵活的：它相对于弹性容器既不收缩也不增长。这相当于设置"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>

推荐阅读