Css flex box使第二个元素居中

Question

我有简单的布局，我需要左侧的h3和右侧的导航，但在中心，我想用弹性框这样做，但我不知道如何使导航集中在右。

在常规网格中，这就像h3的宽度为30％，导航宽度为70％，并且您将导航文本对齐：center。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;