html - CSS flex 盒 : How do you align child elements of a flexbox container to opposite far ends of the main axis?

Question

我正在设计网页标题的样式。我希望标题是包含 Logo 和一些导航链接的单行。我觉得今天布局此页眉的最佳、最现代的方式是使用 CSS3 的 flexbox，所以这就是我想使用的。

我希望 Logo 在 flex 容器中尽可能靠左，而其余导航项则尽可能靠右。这可以通过左右浮动元素轻松实现，但这不是我想做的。所以……

如何将 flexbox 容器的子元素与主轴的相对远端对齐？

flexbox 子元素有一个属性可以让你在横轴上这样做，align-self，但似乎没有在主轴上这样做。

我想出的最好的方法是在 Logo 和导航链接之间插入一个额外的空元素作为间隔。但是我选择为此标题使用 flexbox 的部分原因是为了与响应式设计保持一致，而且我不知道有什么方法可以让间距元素占据所有剩余空间，而不管查看窗口的宽度如何。

这是我目前对标记的立场，简化为仅包含与这种情况相关的元素。

HTML

<ul>
  <!-- Should be as far left as possible -->
  <li id="main">Some Logo <span>Some tag line.</span></li>

  <!-- Should be as far right as possible -->
  <li>Home</li>
  <li>Products</li>
  <li>Price Sheet</li>
  <li>Capabilities</li>
  <li>Contact</li>
</ul>

CSS

ul {
  width:           100%; 
  display:         flex;
  flex-flow:       row nowrap;
  justify-content: flex-end;
  align-items:     center;

  padding:    0;
  margin:     0;

  list-style: none;
}

li {
  margin:     0 8px;
  padding:    8px;

  font-size:   1rem;
  text-align:  center;
  font-weight: bold;

  color:       white;
  background:  green;
  border:     solid 4px #333;
}

#main { font-size: 2rem; }
#main span { font-size: 1rem; }

Answer 1

从你的问题:

I do not know of a way to make the spacing element take up all the remaining space, regardless of the width of the viewing window.

这正是 flex-grow CSS rule 的内容专为。如果只有一个子元素设置了 flex-grow 属性，那么它将占用 flex 容器中的所有剩余空间。在这种情况下，您唯一需要的标记如下:

HTML:

<li id="spacer"></li>

CSS:

#spacer {
    visibility: hidden;
    flex-grow: 1;    
}

---

完整的现场演示:

ul {
  width:           100%; 
  display:         flex;
  flex-flow:       row nowrap;
  justify-content: flex-end;
  align-items:     center;

  padding:    0;
  margin:     0;

  list-style: none;
}

li {
  margin:     0 8px;
  padding:    8px;

  font-size:   1rem;
  text-align:  center;
  font-weight: bold;

  color:       white;
  background:  green;
  border:     solid 4px #333;
}

#main { font-size: 2rem; }
#main span { font-size: 1rem; }

#spacer {
    visibility: hidden;
    flex-grow: 1;    
}

<ul>
  <!-- Should be as far left as possible -->
  <li id="main">Some Logo <span>Some tag line.</span></li>

  <!-- Spacer element -->
  <li id="spacer"></li>
    
  <!-- Should be as far right as possible -->
  <li>Home</li>
  <li>Products</li>
  <li>Price Sheet</li>
  <li>Capabilities</li>
  <li>Contact</li>
</ul>

JSFiddle 版本:https://jsfiddle.net/7oaahkk1/