Css 对齐问题 Angular Flexbox

Question

我有一个关注 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>

输出如下，

但是我想让它们在同一条直线上均匀对齐，我不知道我在这方面犯了什么错误

Stackblitz

Answer 1

为了使水平对齐更容易，您可以将每个项目定义为没有宽度和居中的内容。这可以通过 inline-flex 容器来实现：

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

在项目上设置 centered class 对齐后，确保在所有行上使用相同的间距（space-around 或 space-between）。 This stackblitz 显示使用 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>

Css 对齐问题 Angular Flexbox

Css Alignment Issue Angular Flexbox

css

angular

angular-flex-layout