显示前 2 个 flex 项目彼此居中且顶部对齐答案

【问题标题】：Display first 2 flex items centered to each other and top aligned显示前 2 个 flex 项目彼此居中且顶部对齐
【发布时间】：2019-08-12 15:24:52
【问题描述】：

我正在尝试将前 2 个块彼此居中对齐（带有紫色边框的块），并使所有 3 个框顶部对齐。我已经使用display: inline-flex 实现了这一点，但是仅使用display: flex 是否有可能获得相同的结果？

Fiddle

.container {
  font-size: 0;
  box-sizing: border-box;
}

.blocks {
  display: inline-flex;
}

.blocks-left {
  align-items: center;
  width: 66%;
  vertical-align: top;
  border: 2px solid purple;
}

.blocks-right {
  width: 33%;
}

.block {
  width: 100%;
}

#block-1 {
  background: red;
  height: 100px;
}

#block-2 {
  background: blue;
  height: 200px;
}

#block-3 {
  background: green;
  height: 400px;
}

<div class="container">
  <div class="blocks blocks-left">
    <div id="block-1" class="block"></div>
    <div id="block-2" class="block"></div>
  </div>
  <div class="blocks blocks-right">
   <div id="block-3" class="block"></div>
   </div>
</div>

【问题讨论】：

标签： html css flexbox alignment

【解决方案1】：

如果您想将blocks 更改为块级 display: flex，如果您将container 设为flexbox 并添加align-self: flex-start 到 blocks-left 元素 - 请参见下面的演示：

.container {
  font-size: 0;
  box-sizing: border-box;
  display: flex; /* added */
}

.blocks {
  display: flex; /* now flex instead of inline-flex */
}

.blocks-left {
  align-items: center;
  align-self: flex-start; /* added */
  width: 66%;
  vertical-align: top;
  border: 2px solid purple;
}

.blocks-right {
  width: 33%;
}

.block {
  width: 100%;
}

#block-1 {
  background: red;
  height: 100px;
}

#block-2 {
  background: blue;
  height: 200px;
}

#block-3 {
  background: green;
  height: 400px;
}

<div class="container">
  <div class="blocks blocks-left">
    <div id="block-1" class="block"></div>
    <div id="block-2" class="block"></div>
  </div>
  <div class="blocks blocks-right">
   <div id="block-3" class="block"></div>
   </div>
</div>

【讨论】：

【解决方案2】：

将display: flex 与align-items: flex-start 一起设置为主容器可能会起作用。这是你需要的吗？

.container {
  font-size: 0;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
}

.blocks {
  display: flex;
}

.blocks-left {
  align-items: center;
  width: 66%;
  vertical-align: top;
  border: 2px solid purple;
}

.blocks-right {
  width: 33%;
}

.block {
  width: 100%;
}

#block-1 {
  background: red;
  height: 100px;
}

#block-2 {
  background: blue;
  height: 200px;
}

#block-3 {
  background: green;
  height: 400px;
}

<div class="container">
  <div class="blocks blocks-left">
    <div id="block-1" class="block"></div>
    <div id="block-2" class="block"></div>
  </div>
  <div class="blocks blocks-right">
    <div id="block-3" class="block"></div>
  </div>
</div>

【讨论】：