Css Проблема выравнивания Angular Flexbox - PullRequest
Новая
       26

Css Проблема выравнивания Angular Flexbox

0 голосов
/ 10 апреля 2020

У меня есть следующее HTML с Angular FlexLayout в нем 

<div fxLayout="column">
    <div fxLayout fxLayoutAlign="space-between">
        <span >
         3123131
          </span>
        <span >
         1231231
          </span>

        <span >
           6568
          </span>
        <span >
           989
          </span>
    </div>
    <div fxLayoutGap="30px" fxLayout fxLayoutAlign="space-around">
        <div class="  line first"></div>
        <div class="  line red"></div>
        <div class="  line first"></div>
        <div class="  line red"></div>
    </div>
</div>
<div fxLayout fxLayoutAlign="space-around" fxLayoutGap="20px"
    style="border: 1px solid #eee; border-left: none; border-right: none; margin-left: 10px; padding: 10px;">
    <span class=" large" style="text-align: left;">
          12<span class="small" style="vertical-align: top;">%</span></span>
    <span class=" large" style="text-align: right;">
         68<span class="small" style="vertical-align: top;">%</span></span>
    <span class=" large" style="text-align: left;">
        45<span class="small" style="vertical-align: top;">%</span></span>
    <span class=" large" style="text-align: right;">
          35<span class="small" style="vertical-align: top;">%</span></span>
</div>
<div fxLayout="column" fxLayoutAlign="center">
    <div fxLayoutGap="30px" fxLayout fxLayoutAlign="space-around">
        <i class="icon thick"></i>
        <i class="icon thick"></i>
        <i class="icon thick"></i>
        <i class="icon thick"></i>
    </div>
    <div fxLayout fxLayoutAlign="space-around">
        <span class=" " style="text-align: right;">
            684
          </span>
        <span class=" ">
            3514
          </span>
        <span class=" ">
           21
          </span>
        <span class=" ">
           354
          </span>
    </div>
</div>

Выходные данные, как показано ниже,

enter image description here

Но я хочу, чтобы они были равномерно выровнены по одной прямой линии, я не могу понять, какую ошибку я совершаю в этом

Stackblitz

1 Ответ

0 голосов
/ 11 апреля 2020

Чтобы упростить горизонтальное выравнивание, вы можете определить каждый элемент как не имеющий ширины и центрированного содержимого. Этого можно достичь с помощью контейнера inline-flex: 

.centered {
  display: inline-flex;
  justify-content: center;
  width: 0px;
}

После установки класса centered для выравниваемых элементов убедитесь, что вы используете одинаковый интервал для всех строк (либо space-around, либо space-between). Этот стек * блик показывает, как он выглядит при использовании space-around: 

<div fxLayout="column">
  <div fxLayout fxLayoutAlign="space-around">
    <span class="centered">3123131</span>
    <span class="centered">1231231</span>
    <span class="centered">6568</span>
    <span class="centered">989</span>
  </div>
  <div fxLayout fxLayoutAlign="space-around">
    <div class="centered line first"></div>
    <div class="centered line red"></div>
    <div class="centered line first"></div>
    <div class="centered line red"></div>
  </div>
</div>
<div fxLayout fxLayoutAlign="space-around" class="percentContainer">
  <span class="centered large">12<span class="percent">%</span></span>
  <span class="centered large">68<span class="percent">%</span></span>
  <span class="centered large">45<span class="percent">%</span></span>
  <span class="centered large">35<span class="percent">%</span></span>
</div>
<div fxLayout="column" fxLayoutAlign="center">
  <div fxLayout fxLayoutAlign="space-around">
    <i class="centered icon thick"></i>
    <i class="centered icon thick"></i>
    <i class="centered icon thick"></i>
    <i class="centered icon thick"></i>
  </div>
  <div fxLayout fxLayoutAlign="space-around">
    <span class="centered">684</span>
    <span class="centered">3514</span>
    <span class="centered">21</span>
    <span class="centered">354</span>
  </div>
</div>
...