Текст Flexbox и ячейка диапазона не работают должным образом - PullRequest
Новая
       15

Текст Flexbox и ячейка диапазона не работают должным образом

0 голосов
/ 30 сентября 2018

Пытаюсь больше использовать Flexbox и ссылаюсь на некоторые элементы в Интернете, но для таких, как я, я не получаю его в макете, как я бы надеялся и пытался.

То, что у меня сейчас есть,это: enter image description here

Они должны охватывать всю ширину, как указано черными линиями и равномерно.Кроме того, я пытаюсь получить текст для выравнивания по центру промежутка, поскольку отрезок - это просто цветная точка, как показано на рисунке. 

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

Что я могу сделать, чтобы это исправить?

1 Ответ

0 голосов
/ 30 сентября 2018

Пожалуйста, смотрите ниже.Я задокументировал в источнике. 

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