弹性容器中的边距问题答案

【问题标题】：some issue with margin in flex container弹性容器中的边距问题
【发布时间】：2015-11-20 21:14:00
【问题描述】：

需要帮助。如何使用 .half-img2{ margin-top: 10px; 修复错误} http://prntscr.com/94uqok

这2个imgs的高度必须等于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>

【问题讨论】：

您想要两个小图像之间的间距吗？如果不添加 float:left 到您的 img 标签
是的先生，我需要间距prntscr.com/94uyal

标签： html css flexbox

【解决方案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>

【讨论】：