需要 Flexbox 帮助答案

【问题标题】：Flexbox help needed需要 Flexbox 帮助
【发布时间】：2017-11-23 19:44:57
【问题描述】：

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

但是，似乎将 .header 也设置为 flex 会产生干扰，因为当我将 .header 注释为显示 flex 时，我可以实现空格。

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

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

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

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

【问题讨论】：

我认为问题是你有 2 组 flex 所以你的项目不能均匀间隔，你可以让 ul 占用剩余的空间，然后均匀地间隔 li：jsfiddle.net/2gqb6f2t (不确定这是否是您所追求的）

标签： html css flexbox

【解决方案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>

【讨论】：

所有这些建议真的很有帮助。似乎很管用，谢谢 Sagar

【解决方案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>

【讨论】：

效果很好。非常感谢杰西