html - Flexbox justify-content-center 使内容出现在同一位置

Question

考虑这些行和列

<div>
        <div class="d-flex flex-row justify-content-center bd-highlight mb-3">
          <div class="col-xl-2">Flex item 1</div>
          <div class="col-xl-2">Flex item 2</div>
          <div class="col-xl-2">Flex item 3</div>
        </div>
        <div class="d-flex flex-row justify-content-center bd-highlight mb-3">
          <div class="col-xl-2">Flex item 4</div>
          <div class="col-xl-2">Flex item 5</div>
          <div class="col-xl-2">Flex item 6</div>
        </div>
      </div>
<div>
        <div class="d-flex flex-row justify-content-center bd-highlight mb-3">
          <div class="col-xl-2">Flex item 7</div>
          <div class="col-xl-2">Flex item 8</div>
          <div class="col-xl-2">Flex item 9</div>
        </div>
        <div class="d-flex flex-row justify-content-center bd-highlight mb-3">
          <div class="col-xl-2">Flex item 10</div>
          <div class="col-xl-2">Flex item 11</div>
        </div>

      </div>

https://codepen.io/Wenert82/pen/MWWyaYj

您可以看到元素 1-9 很好地水平对齐。但是，如果您添加的一行不包含相同数量的元素，则这些元素不会从同一位置偏移。

我怎样才能让它看起来像下面这样？

[x] [y] [z]  
[a] [b]

Answer 1

<div>
        <div class="d-flex flex-row justify-content-center bd-highlight mb-3">
          <div class="col-xl-2">Flex item 1</div>
          <div class="col-xl-2">Flex item 2</div>
          <div class="col-xl-2">Flex item 3</div>
        </div>
        <div class="d-flex flex-row justify-content-center bd-highlight mb-3">
          <div class="col-xl-2">Flex item 4</div>
          <div class="col-xl-2">Flex item 5</div>
          <div class="col-xl-2">Flex item 6</div>
        </div>
      </div>
<div>
        <div class="d-flex flex-row justify-content-center bd-highlight mb-3">
          <div class="col-xl-2">Flex item 7</div>
          <div class="col-xl-2">Flex item 8</div>
          <div class="col-xl-2">Flex item 9</div>
        </div>
        <div class="d-flex flex-row justify-content-center bd-highlight mb-3">
          <div class="col-xl-2">Flex item 10</div>
          <div class="col-xl-2">Flex item 11</div>
          <div class="col-xl-2"></div>
        </div>

      </div>

您可以通过简单地在行中插入一个空元素来实现您想要实现的目标。希望有帮助!!!!