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

Question

我正在设计一个网页的标题.我希望标题是一行,其中包括徽标和一些导航链接.我觉得今天布局这个标题的最好,最现代的方法是使用CSS3的flexbox,所以这就是我想要使用的.

我希望徽标尽可能远离Flex容器,其余的导航项尽可能最右边.这可以通过左右浮动元素轻松实现,但这不是我想要做的.所以...

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

flexbox子元素有一个属性,允许您在十字轴上执行此操作align-self,但似乎没有在主轴上执行此操作.

我想出来实现这一目标的最好方法是在徽标和导航链接之间插入一个额外的空元素作为间隔符.但是我选择将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

从你的问题:

我不知道如何使间隔元素占据所有剩余空间,无论观察窗口的宽度如何.

这正是flex-growCSS规则的设计目标.如果只有一个子元素具有该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/