css - 如何在 flex 容器中排列两个居中 div 的顶部？

Question

这是我的代码示例:

.flex-container {
  height: 300px;
  width: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffeeee
}

#item1 {
  width: 100px;
  height: 100px;
  background-color: blue;
}

#item2 {
  width: 120px;
  height: 120px;
  background-color: red;
}

<div class="flex-container">
  <div id="item1"></div>
  <div id="item2"></div>
</div>

https://jsfiddle.net/vL508wax/

我希望蓝色方 block 居中，红色方 block 的顶部与蓝色方 block 的顶部齐平。

我知道我可以使用 margin-top 来做到这一点，但我认为这不是一个好方法。我可以直接用 flexbox 做这个吗？

Answer 1

CSS 网格解决方案，因为使用 flexbox 会很困难:

.flex-container{
  height:300px;
  width:300px;
  display:grid;
  grid-auto-flow:column; /* side by side */
  grid-template-rows:100px; /* the blue height here */
  /* center everything*/
  align-content:center;
  justify-content:center;
  /**/
  background: 
    linear-gradient(green 0 0) center/100% 1px no-repeat,
    #ffeeee
}

#item1{
  width:100px;
  height:100%;
  background-color:blue;
}

#item2{
  width:120px;
  height:120px;
  background-color:red;
  transition:1s all;
}
#item2:hover {
  height:160px;
}

<div class="flex-container">
  <div id="item1">
  
  </div>
  <div id="item2">
  
  </div>
</div>