css - Flexbox 网格 : How to display 3 items side-by-side but varying vertical positions

Question

红色方框是元素，灰色背景是容器:

我想在一个容器中展示 3 个元素。请查看随附的图片。 使用 flexbox 解决这个问题的最佳方法是什么？在移动 View 上应该是一样的。 谢谢

Answer 1

使用 flexbox，通过 nth-child 来改变 flex 对象的特定高度。

例如:

//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/