如何在Flexbox内部以2x2方向拼贴方框？

Question

我创建了一个容器（非flex）并将其分成上半部分，有4行固定高度的列表项，而下半部分用来填充剩余的空间。在底盒内，我的目的是设计4个儿童盒，以适应2x2。我可以将它们分成2个行容器，每个容器有2个盒子，这样可以工作，但我认为可以在不添加任何元素的情况下完成。

我无法弄清楚如何在下方的flexbox中以2x2方向设置4个方框的样式，因为它没有固定的高度，这意味着内部元素难以定义高度。我怎么能用flexbox做到这一点？

＆＃13;

＆＃13;

/* Menu / Primary Styles */

#Menu {
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: absolute;
  z-index: 100;
  right: 0px;
  top: 0px;
  width: 3in;
  background-color: green;
}
#Menu .item {
  width: 100%;
  color: white;
  height: 0.3in;
  background-color: #ff4343;
  border-style: solid;
  border-width: 0 0 0 0.032in;
  border-color: #ff6c6c;
}
#Menu .item:nth-child(odd) {
  background-color: #ff5454;
}
#Menu .bottom {
  flex: 1;
  flex-wrap: wrap;
  display: flex;
  flex-direction: row;
  width: 100%;
  background-color: blue;
}
#Menu .bottom .box {
  flex: 1;
  /* width:50%; */
  background-color: #f3f3f3;
}
#Menu .bottom .box:nth-child(even) {
  background-color: #eaeaea;
}

＆＃13;

<div id="Menu">
  <div class="top">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="bottom">
    <div id="" class="box">1</div>
    <div id="" class="box">2</div>
    <div id="" class="box">3</div>
    <div id="" class="box">4</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

目标结果：

Answer 1

以下是示例：

#Menu {
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: absolute;
  z-index: 100;
  right: 0px;
  top: 0px;
  width: 3in;
  background-color: green;
}
#Menu .item {
  width: 100%;
  color: white;
  height: 0.3in;
  background-color: #ff4343;
  border-style: solid;
  border-width: 0 0 0 0.032in;
  border-color: #ff6c6c;
}
#Menu .item:nth-child(odd) {
  background-color: #ff5454;
}
#Menu .bottom {
  flex: 1;
  flex-wrap: wrap;
  display: flex;
  flex-direction: row;
  width: 100%;
  background-color: blue;
}
.box {
  flex: 1;
    flex-basis:50%;
   /*width:50%;*/
  background-color: #f3f3f3;
}
.bottom div:first-child, .bottom div:last-child
{
  background-color: #eaeaea;
}

<div id="Menu">
  <div class="top">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="bottom">
    <div id="" class="box">1</div>
    <div id="" class="box">2</div>
    <div id="" class="box">3</div>
    <div id="" class="box">4</div>
  </div>
</div>

在.box添加flex-basis:50%（这定义了在分配剩余空间之前元素的默认大小。主大小值使其与宽度或高度相匹配，具体取决于哪个是相关的在弯曲方向上。）但我必须更改background-color

的设置.box

Answer 2

按如下所示更改底部框 css规则。我希望这对你有用

 #Menu .bottom .box {
      /*flex: 1;*/
      width:50%;
      background-color: #f3f3f3;
    }

Answer 3

主要问题是flex: 1并且box缺少宽度。解决方案如下，不确定灰色背景：

/* Menu / Primary Styles */

#Menu {
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: absolute;
  z-index: 100;
  right: 0px;
  top: 0px;
  width: 3in;
  background-color: green;
}
#Menu .item {
  width: 100%;
  color: white;
  height: 0.3in;
  background-color: #ff4343;
  border-style: solid;
  border-width: 0 0 0 0.032in;
  border-color: #ff6c6c;
}
#Menu .item:nth-child(odd) {
  background-color: #ff5454;
}
#Menu .bottom {
  flex: 1;
  flex-wrap: wrap;
  display: flex;
  flex-direction: row;
  width: 100%;
  background-color: blue;
}
#Menu .bottom .box {
  background-color: #f3f3f3;
  width: 50%;
}
#Menu .bottom .box:nth-child(even) {
  background-color: #eaeaea;
}

<div id="Menu">
  <div class="top">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="bottom">
    <div id="" class="box">1</div>
    <div id="" class="box">2</div>
    <div id="" class="box">3</div>
    <div id="" class="box">4</div>
  </div>
</div>

Answer 4

我希望这会帮助你。它可能不是你想要的尺寸，但它是一个2x2的flexbox。也许你可以根据需要更改css以适应它。

＆＃13;

＆＃13;

.flex-grid {
  display: flex;
  flex-wrap: wrap;
  height: 500px;
}
.grid-item {
  flex: 1 1 calc(100% - 50px);
  background: #F90;
  border-top: solid 1px #000;
}
.grid-item:nth-child(odd) {
  background: #F00;
  flex: 0 0 50px;
}

＆＃13;

<div class="flex-grid">
  <div class="grid-item">
    A1
  </div>
  <div class="grid-item">
    B1
  </div>
  <div class="grid-item">
    A2
  </div>
  <div class="grid-item">
    B2
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;