尝试使用flexbox和百分比制作网格

Question

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

1. main-table ，它是100％的父级
2. main-table__group ，其中包含键和值
3. group__key 在A栏中，因此使用50％
4. group__value 位于B列，并使用50％

我期待发生的是这些元素彼此相邻：

Select Distinct  CONVERT(VARCHAR(10),RunDate,103) AS  RunDate
from Index

鉴于我将再增加3行这类，我对以下内容的了解无能为力：

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

我正在使用Less，所以请在回答时考虑到这一点，并记住将来我需要这个：

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

以下是相关代码：

LESS

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

.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;
  }
}

Answer 1

我相信这就是你所追求的。为了获得最终结果，您必须将flex项目定义为12.5％宽度，然后添加其他6列。

.main-table {
  width: 100%;
  height: 300px;
}

.main-table__group {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.main-table__key {
  height: 30px;
  width: 50%;
  background-color: green;
}

.main-table__val {
  height: 30px;
  width: 50%;
  background-color: red;
}

/* LESS

.main - table {
  width: 100 % ;
  height: 300 px; &
  __group {
    display: flex;
    width: 100 % ;
    justify - content: flex - start;
    flex - wrap: wrap;
  } &
  __key {
    height: 30 px;
    width: 50 % ;
    background - color: green;
  } &
  __val {
    height: 30 px;
    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 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>