css - 使用 4 个方形按钮创建响应式布局

Question

我想创建一个这样的布局：

黑色边框表示窗口（或容器）的宽度。粉红色的方块很简单divs，然后我将其视为按钮。它们总是有四个相同的大小并且总是方形的。

单个按钮的最大宽度必须是300px最小的50px。当有足够的空间时，所有四个按钮都在同一行上，否则最后两个位于新行上。按钮可调整大小。重要的是它们永远不会小于50px并且总是方形的。

我能怎么做？我尝试像这样使用 Flexbox：https ://codepen.io/anon/pen/NVpzYe

但显然它不起作用。然后我不知道如何设置正确的高度。

.container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.firstChildren {
  width: 50%;
  border: 1px solid black;
  display: flex;
  height: 50px;
  minWidth: 50px;
}

.secondChildren {
  width: 50%;
  border: 1px solid black;
  height: 50px;
}

<div class="container">
  <div class="firstChildren">
    <div class="secondChildren" />
    <div class="secondChildren" />
  </div>
  <div class="firstChildren">
    <div class="secondChildren" />
    <div class="secondChildren" />
  </div>
</div>

标签： cssflexboxcss-grid

Answer 1

利用flex: 0 1 ...

笔记！

你必须用</div>not关闭 div/

查看工作代码

.container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.firstChildren {
  display: flex;
  flex-wrap: nowrap;
  flex: 1 0 25%;
  margin: 2rem;
}

.secondChildren {
  flex: 0 1 50%;
  height: 30vh;
  background: pink;
  margin: 2rem;
  min-width: 50px;
  max-width: 300px;
}

<div class="container">
  <div class="firstChildren">
  <div class="secondChildren"></div>
    <div class="secondChildren"></div>
  </div>
  <div class="firstChildren">
    <div class="secondChildren"></div>
    <div class="secondChildren"></div>
  </div>
</div>