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

我的样式是网页的标题.我想要标题是一个单行,包括一个标志和一些导航链接.我觉得今天布局这个头的最好的,最现代化的方式是使用 CSS3的flexBox,所以这就是我想要使用的.

我希望标志尽可能地在Flex容器中留下最远的位置,剩下的导航项目尽可能地在最右边.这可以通过左右浮动来轻松实现,但这不是我想做的.所以…

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

FlexBox子元素有一个属性,可以让您在交叉轴上进行自动对齐,但是在主轴上似乎没有这样做.

我想出的最好的方法是在标识和导航链接之间插入一个额外的空的元素作为间隔.但是我选择使用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; }

解决方法

从你的问题：

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.

这正是070​​00设计的.如果只有一个子元素设置了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/

原文地址：https://www.jb51.cc/html/229447.html