Flexbox 文本和跨度单元格未按预期运行

Question

尝试更多地使用 Flexbox 并参考了网络上的一些项目，但对于我这样的人来说，我并没有像我希望和尝试的那样进行布局。

我现在拥有的是：

这些应该跨越黑线指示的整个宽度，并且 space 均匀。此外，由于跨度只是如图所示的彩色点，因此我试图让文本证明中心位于跨度内。

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

Flexbox 文本和跨度单元格未按预期运行

Flexbox text and span cell not behaving as expected

html

css

less

flexbox