Flex容器中的边距有些问题

Question

需要一些帮助。如何修复.half-img2 {margin-top：10px; } http://prntscr.com/94uqok

这2个高度必须等于main-img

http://plnkr.co/edit/Dvj5HfG6hJqvYPxr0ljJ?p=preview

HTML：

<style type="text/css">
        .test{
            display: flex;
        }
        .test>div{
            flex: 1;
        }
        .test .main-img{
            flex-grow: 2;
        }
        img{
            width: 100%;
        }
        .half-img{
            margin-left: 10px;
        }
        .half-img2{
            margin-top: 10px;
        }
        </style>
<div class="test">
            <div class="main-img">
                <img src="http://fakeimg.pl/350x200/00CED1/FFF/?text=img+placeholder">
            </div>
            <div class="half-img">
                <div class="half-img1">
                    <img src="http://fakeimg.pl/350x200/00CED1/FFF/?text=img+placeholder">
                </div>
                <div class="half-img2">
                    <img src="http://fakeimg.pl/350x200/00CED1/FFF/?text=img+placeholder">
                </div>
            </div>
        </div>

Answer 1

我会忽略图像大小，因为它们与div布局问题并不真正相关。

似乎需要明智地使用边距和flex-column div布局。

布局就是这样的。

* {
  box-sizing: border-box;
}
.test {
  display: flex;
  width: 80%;
  margin: 1em auto;
  border:1px solid green;
}

img {
  display: block;
}

.test div {

}

.main-img {
  flex:2;
  margin-right: 10px;
  background: lightblue;
}

.half-img {
  display: flex;
  flex-direction: column;
  height: 250px;
}

.half-img {
  flex:1;
  display: flex;
  flex-direction: column;
}

.half-img div {
  flex:1;
  background: lightblue;
}
.half-img1 {
  margin-bottom: 5px;
}

.half-img2 {
  margin-top: 5px;
}

<div class="test">
            <div class="main-img">

            </div>
            <div class="half-img">
                <div class="half-img1">
                  </div>
                <div class="half-img2">

                </div>
            </div>
        </div>