Flexbox网格：如何并排显示3个项目，但垂直位置不同

Question

红色框是项目，灰色背景是容器：

我要在容器中显示3个项目。请查看随附的图片。 使用flexbox进行此操作的最佳方法是什么？在移动视图上应该相同。 谢谢

Answer 1

使用带有nth-child的flexbox更改flex对象的特定高度。

EX：

//HTML
<div class="container">
    <div class="flex"></div>
    <div class="flex"></div>
    <div class="flex"></div>
</div>

//CSS
.container{
  background: #AAA;
  border: 1px solid black;
  display: flex;
  height: 15vw;
  width: 20vw;
  }
.flex{
  background: #F00;
  height: 7vw;
  margin-left: 1.25vw;
  width: 5vw;
  }
.flex:nth-child(1){
  margin-top: 6vw;
  }
.flex:nth-child(2){
  margin-top: 1vw;
  }
.flex:nth-child(3){
  margin-top: 5vw;
  }

在此处查看示例： https://jsfiddle.net/mn8ukbae/7/

Answer 2

在flex中，您拥有align-self属性，该属性可用于在同一个flex父元素中以与其他元素不同的方式在横轴上对齐元素。

.container { display: flex; }
.item--1 { align-self: flex-end; }
.item--2 { align-self: flex-start; }
.item--3 { align-self: center; }

我几乎可以赌一辈子，这是一项“家庭作业”练习，您最好阅读flex和align-self以充分利用它。