Css对齐问题Angular Flexbox答案

【问题标题】：Css Alignment Issue Angular FlexboxCss对齐问题Angular Flexbox
【发布时间】：2020-07-22 16:21:45
【问题描述】：

我有一个带有 Angular FlexLayout 的 HTML

<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

【问题讨论】：

“均匀排列在同一条直线上”是什么意思？哪些元素没有正确对齐？
你好@ConnorsFan 我希望第一列中的所有 4 个项目都居中对齐！
是否包括“3123131”？哪个项目应该用作对齐其他项目的参考？
我们实际上可以使用12%作为参考@ConnorsFan
那么“3123131”呢？是否应该在同一列中对齐？

标签： css angular angular-flex-layout

【解决方案1】：

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

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

在要对齐的项目上设置 centered 类后，请确保在所有行上使用相同的间距（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>

【讨论】：