Html 尝试使用flexbox和百分比创建网格

我目前正在尝试使用FLEX制作一个表，它应该有一个

主表是100%的父表

main-table__组，用于保存键和值

组密钥位于A列中，因此使用50%

组值在B列中，并且使用50%

我希望发生的是，这些元素彼此相邻，如下所示：

A-B
A-B
A-B
A-B

考虑到我将再添加3行这种类型的内容，我不知道我将如何得到以下内容：

A-B-A-B-A-B-A-B

我使用较少，因此请在回答时考虑到这一点，并记住将来我将需要：

A-B A-B A-B A-B
A-B A-B A-B A-B
A-B A-B A-B A-B
A-B A-B A-B A-B

以下是相关代码：

少

Html

AB
AB
AB
AB

我相信这就是你想要的。为了获得最终结果，您必须将flex项定义为12.5%宽度，并且只需添加其他6列

.main表{
宽度：100%；
高度：300px；
}
.main-table__组{
显示器：flex；
宽度：100%；
调整内容：灵活启动；
柔性包装：包装；
}
.main-table__键{
高度：30px；
宽度：50%；
背景颜色：绿色；
}
.main-table_uval{
高度：30px；
宽度：50%；
背景色：红色；
}
/*少
.主表{
宽度：100%；
高度：300像素&
__团体{
显示器：flex；
宽度：100%；
证明-内容：flex-start；
柔性包装：包装；
} &
__钥匙{
高度：30像素；
宽度：50%；
背景色：绿色；
} &
__瓦尔{
高度：30像素；
宽度：50%；
背景色：红色；
}
}
*/

A.
B
A.
B
A.
B
A.
B
A.
B
A.
B

Flexbox不打算（不太可能）替代表格。这就是CSS表格的用途。@Paulie_D CSS Grid*@Gerard也许你应该将你的LESS翻译成CSS，以便代码段工作，并将你的LESS移到代码段之外？很抱歉gerald再次打扰你，虽然一开始它似乎工作得很好，但这完全出乎意料，当我给它适当的值和列A-B-A-B-A-B-A-B-A-B时，它就是这样做的，它忽略了群体行为，我应该在这里添加实际的代码吗？Marcos，我已经调整了代码。你需要另一种格式吗？

.main-table {
  width: 100%;
  display:flex;
  justify-content: center;
  flex-wrap: nowrap;
  height: 300px;
  &__group {
    display: flex;
    width: 100%;
  }
  &__key{
    height: 30px;
    width: 50%;
    background-color: green;
  }
  &__val{
    height: 30px;
    width: 50%;
    background-color: red;
  }
}

<div class="main-table">
    <div class="main-table__group">
            <div class="main-table__key">A</div><div class="main-table__val">B</div>
            <div class="main-table__key">A</div><div class="main-table__val">B</div>
            <div class="main-table__key">A</div><div class="main-table__val">B</div>
            <div class="main-table__key">A</div><div class="main-table__val">B</div>
    </div>
</div>