Flexbox布局，卡在标题部分

Question

[如果您对flexbox大师感到好奇，那有一点时间可以帮助您进行此布局设置（如果有必要，也可以使用Grid，但我认为可以使用flexbox实现它。

所有这些年来，引导程序已经使我的大脑变得不适，我需要对其进行重新训练。

这里是我到目前为止所遇到的，仍然很混乱。

我有：放置徽标，并将stats部分拉到右侧，但我不知道如何正确地将其放入列中。

期望的结果

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

Answer 1

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

更有效的解决方案将同时使用flexbox和grid。

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

每一行代码执行特定功能。要查看每个规则的功能，请进入“开发工具”，然后选中每个规则的复选标记。

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