很好奇你们这些 flexbox 专家是否有时间帮助这个布局(如果有必要,也可以使用 Grid,但我认为它应该可以通过 flexbox 实现)。
所有这些年的自力更生训练了我的大脑,我需要重新训练它。
这是我到目前为止所拥有的,仍在搞乱它。
我有: Logo 已放置,统计部分已拉到右侧,但我不知道如何将其正确放入列中。
期望的结果
<mat-toolbar>
<div class="company-logo"></div>
<div class="stats">
<div class="stats-one">
Info 1: XXX
Info 2: XXX
</div>
<mat-divider [vertical]="true"></mat-divider>
<div>
Info 3: XXX
Info 4: XXX
</div>
</div>
</mat-toolbar>
.mat-toolbar {
display: flex;
align-items: stretch;
height: 5em;
background-color: #4CAEB2;
margin-bottom: 2em;
}
.company-logo {
align-self: flex-end;
background-image: url("../../../assets/images/logo.jpg");
background-repeat: no-repeat;
height: 4em;
flex-basis: 20em;
}
.stats {
display: flex;
flex-direction: column;
margin-left: auto;
color: white;
}
最佳答案
Flexbox 可以提供布局,但在我看来它需要过多的代码。
更有效的解决方案是同时使用 flexbox 和网格。
我在下面发布了一个示例。
每一行代码执行特定的功能。要查看每条规则的作用,请进入 Dev Tools 并切换每个规则的复选标记。
mat-toolbar {
display: flex;
height: 5em;
border: 1px solid black;
}
.company-logo {
display: flex;
align-items: center;
justify-content: center;
margin-left: 1em;
margin-right: auto;
}
.stats {
width: 30%;
height: 100%;
padding: 5px;
margin-right: 1em;
}
.stats-one {
display: grid;
grid-template-columns: 1fr auto 1fr;
grid-template-rows: 1fr 1fr;
grid-auto-flow: column;
align-items: center;
justify-items: center;
height: 100%;
}
.stats-one::before {
grid-column: 2 / 3;
grid-row: 1 / 3;
border-right: 1px solid black;
content: '';
height: 80%;
margin: 0 5px;
}
* {
box-sizing: border-box;
}
<mat-toolbar>
<div class="company-logo">
<img src="http://i.imgur.com/60PVLis.png" width="65" height="65" alt="">
</div>
<div class="stats">
<div class="stats-one">
<div>Info 1: XXX</div>
<div>Info 2: XXX</div>
<div>Info 3: XXX</div>
<div>Info 4: XXX</div>
</div>
</div>
</mat-toolbar>
jsFiddle demo
关于html - Flexbox 布局,难倒在标题部分,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59226464/