Css 对齐问题 Angular Flexbox
Css Alignment Issue Angular Flexbox
我有一个关注 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>
输出如下,
但是我想让它们在同一条直线上均匀对齐,我不知道我在这方面犯了什么错误
为了使水平对齐更容易,您可以将每个项目定义为没有宽度和居中的内容。这可以通过 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>
我有一个关注 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>
输出如下,
但是我想让它们在同一条直线上均匀对齐,我不知道我在这方面犯了什么错误
为了使水平对齐更容易,您可以将每个项目定义为没有宽度和居中的内容。这可以通过 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>