flexbox布局问题？

如图，想让右边的三副小图按照上中下的位置排布，而不想像这样靠上挤在一起。


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <img class="bigbanner" src="http://img0.imgtn.bdimg.com/it/u=2998510202,2367151886&fm=21&gp=0.jpg" alt="">
  <div class="side">
    <img src="http://img0.imgtn.bdimg.com/it/u=2998510202,2367151886&fm=21&gp=0.jpg" alt="">
    <img src="http://img0.imgtn.bdimg.com/it/u=2998510202,2367151886&fm=21&gp=0.jpg" alt="">
    <img src="http://img0.imgtn.bdimg.com/it/u=2998510202,2367151886&fm=21&gp=0.jpg" alt="">
    
  </div>
</body>  
</html>


//css
body {
  padding: 15px;
}
.bigbanner {
    width: 80%;
    padding-right: 5px;
    box-sizing: border-box;
    height: auto;
}
.side {
  width: 19%;
  height: 100%;
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
}

应该是用flexbox才能实现吧？感谢！

代码请点击

https://jsfiddle.net/wggaphyx/

楼上是正确的，给.side设置高度。
从评论里，我知道题主的意思，所以就给.bigbanner和.side设置个父元素，那么高度也会撑起来。就不用设置固定的高度啦，保持弹性哦。

<main>
    <img class="bigbanner" >
    <div class="side">
      <img >
      <img >
      <img >
    </div>
</main>

顺便放个链接：http://blog.lwxyfer.com/flex-zhi-nan/

对.side设置一个固定高度就可以这三个小图上中下排列了。

flexbox可以在这个上面玩玩：
https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/

【热门文章】