javascript - 在 1 行上有两个元素，但保持不同的高度

Question

<分区>

Answer 1

Flex box 旨在使用您提供的可用空间，这就是为什么它非常适合从桌面扩展到平板电脑再到移动设备。

如果您希望一行中的元素具有不同的高度，您可以像这样简单地指定一个弹性项目具有不同的高度(这里有一个 fiddle :https://jsfiddle.net/ur0pesmd/1/):

HTML

<div class = "container">
  <div class = "flexCol"></div>
  <div class = "flexCol" id = "smaller"></div>
</div>

CSS

.container{
   display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  -ms-flex-flow: row nowrap;
      flex-flow: row nowrap;
      background: #fff;
  width: 400px;
  height: 200px;
}

.flexCol{
  flex: 1 1 auto;
  background: #f00;
}

#smaller{
  flex: 2 1 auto;
  background: #0f0;
  height: 80%;
}