需要Flexbox帮助

Question

我正在尝试使用flexbox justify content: space-around将我的标题中的导航项均匀地用于桌面显示。

然而，似乎.header也设置为flex正在干扰，因为当我将.header注释为显示flex时，我能够实现空格。

尝试了我能想到的一切，所以现在我来找专家！ 任何想法都非常感激。谢谢。

＆＃13;

＆＃13;

.header {
  margin-bottom: 15%;
  display: flex;
  justify-content: space-between;
}

.header-ul {
  display: flex;
  justify-content: space-between;
}

＆＃13;

<section class="home">
  <header class="header">
    <h1 class="h1">made tight</h1>
    <i class="fa fa-bars is-hidden-tablet" aria-hidden="true"></i>
    <!--non-mobile nav-->
    <ul class="header-ul is-hidden-mobile">
      <li href='#'>Home</li>
      <li href='#'>Studio</li>
      <li href='#'>Services</li>
      <li href='#'>Careers</li>
      <li class='contact-li' href='#'>Contact</li>
    </ul>
  </header>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以将margin-left添加到ul.header-ul.is-hidden-mobile li

.header {
  margin-bottom: 15%;
  display: flex;
  justify-content: space-between;
}

.header-ul {
  display: flex;
  justify-content: space-between;
}
ul.header-ul.is-hidden-mobile li {
margin-left:30px;
}

<section class="home">
  <header class="header">
    <h1 class="h1">made tight</h1>
    <i class="fa fa-bars is-hidden-tablet" aria-hidden="true"></i>
    <!--non-mobile nav-->
    <ul class="header-ul is-hidden-mobile">
      <li href='#'>Home</li>
      <li href='#'>Studio</li>
      <li href='#'>Services</li>
      <li href='#'>Careers</li>
      <li class='contact-li' href='#'>Contact</li>
    </ul>
  </header>

Answer 2

您可以使用flex-grow: 1让导航​​填充剩余空间。

.header {
  margin-bottom: 15%;
  display: flex;
  justify-content: space-between;
}

.header-ul {
  display: flex;
  justify-content: space-between;
  flex-grow: 1;
}

<section class="home">
  <header class="header">
    <h1 class="h1">made tight</h1>
    <i class="fa fa-bars is-hidden-tablet" aria-hidden="true"></i>
    <!--non-mobile nav-->
    <ul class="header-ul is-hidden-mobile">
      <li href='#'>Home</li>
      <li href='#'>Studio</li>
      <li href='#'>Services</li>
      <li href='#'>Careers</li>
      <li class='contact-li' href='#'>Contact</li>
    </ul>
  </header>