Flexbox文本和跨接单元的行为不符合预期

Question

试图更多地利用Flexbox并在网络上提到了一些项目，但是对于像我这样的人，并没有像我希望的那样尝试对它进行布局。

我现在所拥有的是：

这些区域应覆盖黑色线所示的整个宽度，并均匀间隔。此外，由于跨度只是如图所示的彩色圆点，所以我试图使文本居中对齐。

.section-copy {
  .column-10;
  .center;
  margin-top: @column-gutter * 2;
}

.section-infomatic {
  display: inline-flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
}

.infomatic-item {
  padding: 5px;
}

.dot {
  width: 25px;
  height: 25px;
  display: inline-block;
  border-radius: 50%;
}

<section class="section section-map">
  <div class="section-headline centered">Where does interest in stories originate and how do stories spread in the United States?</div>
  <div class="section-copy">
    <p>Search interest generally stems from the larger metro regions. Sports related news usually peaks around the home cities of related teams, while news events with an area-of-effect (like natural disasters) peak in those areas. For example, search interest
      around the 2017 solar eclipse followed the arc of the eclipse movement through the country.</p>
    <p>The peaks in the graphs can tell us whether a topic resonates more in liberal or conservative areas. For example, searches on “US holidays” peak in places like West Virginia, while searches on the “Met Gala” peak in liberal metropolitan centers like
      New York and Los Angeles.</p>
  </div>
  <div class="section-copy">
    <div class="section-infomatic">
      <div class="infomatic-item">
        <span class="dot lightgreen"></span>Politics & Elections
      </div>
      <div class="infomatic-item">
        <span class="dot hotpink"></span>Natural Catastrophes
      </div>
      <div class="infomatic-item">
        <span class="dot ordorange"></span>Entertainment & Sports
      </div>
    </div>
    <div class="section-infomatic">
      <div class="infomatic-item">
        <span class="dot tealish"></span>Environment & Science
      </div>
      <div class="infomatic-item">
        <span class="dot orange"></span>Social Issues
      </div>
      <div class="infomatic-item">
        <span class="dot purpish"></span>War & Violence
      </div>
    </div>
  </div>
  <div class="chart chart-map"></div>
</section>

该如何解决？

Answer 1

请参阅下文。我已经在源文件中进行了记录。

.section-copy {
 /*  .column-10;
  .center;
  margin-top: @column-gutter * 2; */
}

.section-infomatic {
  display: flex; /* Instead of inline-flex */
  flex-flow: row wrap;
  justify-content: space-around; /* Instead of center */
  align-items: center;
}

.infomatic-item {
  padding: 5px;
  flex: 1; /* Added */
  display: flex; /* Added */
  align-items: center; /* Added, vertical alignment */
}

.dot {
  width: 25px;
  height: 25px;
  display: inline-block;
  border-radius: 50%;
  background-color: blue; /* For visibility only */
}

<section class="section section-map">
  <div class="section-headline centered">Where does interest in stories originate and how do stories spread in the United States?</div>
  <div class="section-copy">
    <p>Search interest generally stems from the larger metro regions. Sports related news usually peaks around the home cities of related teams, while news events with an area-of-effect (like natural disasters) peak in those areas. For example, search interest
      around the 2017 solar eclipse followed the arc of the eclipse movement through the country.</p>
    <p>The peaks in the graphs can tell us whether a topic resonates more in liberal or conservative areas. For example, searches on “US holidays” peak in places like West Virginia, while searches on the “Met Gala” peak in liberal metropolitan centers like
      New York and Los Angeles.</p>
  </div>
  <div class="section-copy">
    <div class="section-infomatic">
      <div class="infomatic-item">
        <span class="dot lightgreen"></span>Politics & Elections
      </div>
      <div class="infomatic-item">
        <span class="dot hotpink"></span>Natural Catastrophes
      </div>
      <div class="infomatic-item">
        <span class="dot ordorange"></span>Entertainment & Sports
      </div>
    </div>
    <div class="section-infomatic">
      <div class="infomatic-item">
        <span class="dot tealish"></span>Environment & Science
      </div>
      <div class="infomatic-item">
        <span class="dot orange"></span>Social Issues
      </div>
      <div class="infomatic-item">
        <span class="dot purpish"></span>War & Violence
      </div>
    </div>
  </div>
  <div class="chart chart-map"></div>
</section>