html - Flexbox 布局，难倒标题部分

Question

好奇你的 flexbox 大师是否有时间帮助这个布局（如果有必要也可以使用 Grid，但我认为这应该可以通过 flexbox 实现）。

所有这些年的引导已经适应了我的大脑，我需要重新训练它。

这是我到目前为止所拥有的，仍然在搞乱它。

我所拥有的：徽标已放置，统计信息部分被拉到右侧，但我无法弄清楚如何将其正确放入列中。

期望的结果

<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;
}

标签： htmlcssflexboxcss-grid

Answer 1

Flexbox可以提供布局，但在我看来它需要过多的代码。

更有效的解决方案是同时使用 flexbox 和网格。

我在下面发布了一个示例。

每行代码执行一个特定的功能。要查看每个规则的作用，请进入开发工具并切换每个规则的复选标记。

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 演示