html - 如何用容器类给盒子上色？

Question

我尝试使用容器定义两个颜色为蓝色和绿色的框。目的是研究flexbox的特性。但是我不明白为什么我的代码中缺少我，它不起作用...感谢您的帮助!

.container{
  display:flex;
  flex-wrap:wrap;
  width:100%;
  height:100%;
}
.blue{
  background-color:blue;
  width:50%;
}
.green{
  background-color:green;
  width:50;
}

<div class="container">
<div class="box blue">

</div>
<div class="box green">

</div>
</div>

我想用蓝色和绿色绘制 2 个宽度为 50% 的框，每个框都在一个容器中

Answer 1

使用这个 Html

<div class="container">
<div class="row same-line">

<div class="col-md-6 box blue"></div>
<div class="col-md-6 box green"></div>
</div>
</div>

并使用这个CSS

.blue{
  background:blue;
  height:50px;
  width:50%;
}
.green{
  background:green;
  height:50px;
  width:50%;
}
.same-line{
  display:inline-flex;
  width:100%;
}

这是工作 fiddle https://jsfiddle.net/d5hxc0qu/