flexbox＆amp; amp的问题填充

Question

目前，我在下图中看到了您所看到的内容。容器100％浏览器宽度。左列有100％的图像。第二列有4个div，由flexbox控制，100％图像。

http://s10.postimg.org/tlh1nq5zd/sample_1.jpg

所需效果如下所示

http://s21.postimg.org/kn82otopz/sample_2.jpg

div＆＃39;项目的填充正在使它成行。我的CSS可能是错的，因为我不熟悉flexbox，但我的印象是flexbox可以考虑子元素的填充/边距。 （我正在使用900x528图像以防任何人想知道）

＆＃13;

＆＃13;

#homepage img {
	width: 100%;
	height: auto;
}
#homepage .wrap {
	overflow: hidden;
	padding-right: 2%;
	padding-left: 2%;
	padding-top: 20px;
	padding-bottom: 20px;
	max-width: 1200px;
	margin: auto;
}
#homepage .big {
	float: left;
	width: calc(50% - 10px);

}
#homepage .small {
	float: right;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	width: calc(50% - 10px);
}
#homepage .small .item {
	width: 50%;
}
#homepage .small .uno {
	padding: 0px 10px 10px 0px;
}
#homepage .small .dos {
	padding: 0px 0px 10px 10px;
}
#homepage .small .tres {
	padding: 10px 10px 0px 0px;
}
#homepage .small .dos {
	padding: 0px 0px 10px 10px;
}
#homepage .small .cuatro {
	padding: 10px 0px 0px 10px;
}

＆＃13;

<div id="homepage">
    
      <div class="wrap">
      
          <div class="big">
          <img src="images/magnus.jpg" />
          </div>
          
          <div class="small">
                    
              <div class="item uno">
                  <img src="images/magnus.jpg" />
              </div>
              
              <div class="item dos">
                  <img src="images/magnus.jpg" />
              </div>
              
              <div class="item tres">
                  <img src="images/magnus.jpg" />
              </div>
              
              <div class="item cuatro">
                  <img src="images/magnus.jpg" />
              </div>
                    
          </div>
      
      </div>
    
    </div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

记下像

这样的代码

＆＃13;

＆＃13;

#homepage img {
	width: 100%;
	height: auto;
}
#homepage .wrap {
	overflow: hidden;
	padding-right: 2%;
	padding-left: 2%;
	padding-top: 20px;
	padding-bottom: 20px;
	max-width: 1200px;
	margin: auto;
}
#homepage .big {
	float: left;
	width: calc(50% - 10px);

}
#homepage .small {
	float: right;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	width: calc(50% - 10px);
}
#homepage .small .item {
	width: 50%;
	display: inline-flex;
}
#homepage .small .uno {
	padding: 0;
}
#homepage .small .dos {
	padding: 0;
}
#homepage .small .tres {
	padding: 0;
}
#homepage .small .dos {
	padding: 0;
}
#homepage .small .cuatro {
	padding: 0;
}

＆＃13;

<div id="homepage">
    
      <div class="wrap">
      
          <div class="big">
          <img src="images/magnus.jpg" />
          </div>
          
          <div class="small">
                    
              <div class="item uno">
                  <img src="images/magnus.jpg" />
              </div>
              
              <div class="item dos">
                  <img src="images/magnus.jpg" />
              </div>
              
              <div class="item tres">
                  <img src="images/magnus.jpg" />
              </div>
              
              <div class="item cuatro">
                  <img src="images/magnus.jpg" />
              </div>
                    
          </div>
      
      </div>
    
    </div>

＆＃13;

＆＃13;

＆＃13;