html - Css flex box 使第二个元素居中

Question

我有一个简单的布局，我需要左侧的 h3 和右侧的 nav 但在中心，我想用 flex box 来做到这一点，但我不知道如何使 nav 居中于对。

在常规网格中，这就像 h3 的宽度为 30%，导航宽度为 70%，并且您给导航文本对齐:居中。

* {
  margin: 0;
  paddding: 0;
}

header {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

nav {
  text-align: center;
}

ul {
  list-style: none;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin: 0;
  text-align: center;
}
ul li {
  padding-right: 15px;
}

<header>
  <h3>hello</h3>
  <nav>
    <ul>
      <li>Tab1</li>
      <li>Tab2</li>
      <li>Tab3</li>
    </ul>
  </nav>
</header>

Answer 1

您可以添加到导航边距:自动

* {
  margin: 0;
  paddding: 0;
}
header {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
nav {
  text-align: center;
  margin: auto;
}
ul {
  list-style: none;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin: 0;
  text-align: center;
}
ul li {
  padding-right: 15px;
}

<header>
  <h3>hello</h3>
  <nav>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </nav>
</header>