html - 响应式 CSS 框

Question

我已经有一段时间没有做过这样的事情了。我只是想根据以下内容检查制作盒子的方法:

• 2 行
• 每行2个盒子
• 100% 到页面容器宽度

Answer 1

这是一个很难的问题，2018 年才刚刚开始，我认为我的解决方案是 2016 xD，但你的要求看起来可以用“flex”来完成。如果您真的想更深入地了解 flex，请查看此 post ，你也可以尝试使用 css 网格，但我更喜欢 flex。

.box {
  color: white;
}

.row {
  display: flex;
  flex-flow: row wrap;
}

.row div {
  flex: 50%;
  text-align: center;
}

.blue {
 background: blue;
}

.red {
  background: red;
}

<div class="box">
  <div class="row red">
      <div>1</div>
      <div>2</div>
  </div>
   <div class="row blue">
      <div>3</div>
      <div>4</div>
   </div>
</div>