Layout 左中右三區 - daniel-qa/Vue GitHub Wiki

左中右三區塊

Inline 版本

<div style="display:flex; align-items:center;">
  <div>Logo</div>

  <div style="margin:auto;">Dashboard</div>

  <div style="margin-left:auto;">User</div>
</div>
元素 CSS 作用
container display:flex 橫向排列
center margin:auto 置中
right margin-left:auto 推到最右

上方工具列

[Logo]      [Title]                [User Menu]

範例

<div class="row">
  <div class="left">Logo</div>

  <div class="center">Dashboard</div>

  <div class="right">User</div>
</div>

.row {
  display: flex;
  align-items: center;
}

.center {
  margin: auto;
}

.right {
  margin-left: auto;
}
⚠️ **GitHub.com Fallback** ⚠️