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

我正在设计网页标题的样式。我想标题是一个单行，其中包括一个标志和一些导航链接。我觉得现在布局这个标题的最好、最现代的方式是使用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>

将

ul

包装在列表的其余项目上，并使用嵌套的flex容器。这是为了提供flexbox来作用于两个元素

在主flexbox父级上使用

justify content:space-between

，使两个元素的间距相等

。父菜单{
宽度：100%；
显示器：flex；
flex-flow：行nowrap；
证明内容：之间的空间；
/*修改*/
对齐项目：居中；
填充：0；
保证金：0；
列表样式：无；
}
李{
边际：0.8px；
填充：8px；
字号：1rem；
文本对齐：居中；
字体大小：粗体；
颜色：白色；
背景：绿色；
边框：实心4px#333；
}
#主要{
字号：2rem；
}
#主跨{
字号：1rem；
}
.右菜单{
显示器：flex；
/*加*/
}

一些徽标和标签线。


家
产品
价格表
能力
接触

我认为唯一需要的灵活性，至少在大屏幕上，应该放在列表中的第一个flex项上。您要将徽标放置在的位置

通过将此项目

flex grow

规则设置为

1

，并将

文本对齐

设置为

left

，它将保持在左侧，大小将增大，确保所有其他项目保持在右侧。由于徽标的高度值可能大于所有其他项目，因此有必要将

对齐项目

规则更改为

基线

，确保所有项目水平对齐

此外，我还添加了一些媒体查询，以相应地更改flex设置

html{
框大小：边框框；
}
*，*：之前，*：之后{
框大小：边框框；
}
身体{
保证金：0；
}
保险商实验室{
宽度：100%；
显示器：flex；
柔性流动：柱状nowrap；
证明内容：中心；
对齐项目：拉伸；
填充：0；
保证金：0；
列表样式：无；
}
李{
保证金：0；
填充：8px；
字号：1rem；
文本对齐：居中；
字体大小：粗体；
颜色：白色；
背景：绿色；
边框：实心4px#333；
}
李：第一个孩子{
字体系列：sans；
字号：2em；
文本对齐：居中；
}
李：第一个孩子{
字号：首字母；
}
@介质（最小宽度：34em）{
保险商实验室{
柔性流：行换行；
证明内容：之间的空间；
调整项目：灵活启动；
}
李{
弹性：1；
}
#主要{
弹性：0 100vw；
}
}
@介质（最小宽度：48em）{
保险商实验室{
证明内容：柔性端；
调整项目：基线；
}
李{
flex：无；
}
#主要{
弹性：10自动；
文本对齐：左对齐；
}
}

一些徽标和标签线
家
产品
价格表
能力
接触

根据您的问题：

我不知道如何使间距元素占据所有剩余空间，而不考虑观察窗口的宽度

这正是设计的目的。如果只有一个子元素设置了

flex grow

属性，那么它将占用flex容器中的所有剩余空间。在这种情况下，您只需要以下标记：

HTML:

---

完整的现场演示：

ul{
宽度：100%；
显示器：flex；
flex-flow：行nowrap；
证明内容：柔性端；
对齐项目：居中；
填充：0；
保证金：0；
列表样式：无；
}
李{
边际：0.8px；
填充：8px；
字号：1rem；
文本对齐：居中；
字体大小：粗体；
颜色：白色；
背景：绿色；
边框：实心4px#333；
}
#主{字体大小：2rem；}
#主跨距{字体大小：1rem；}
#间隔棒{
可见性：隐藏；
柔性生长：1；
}

一些徽标和标签线

家
产品
价格表
能力
接触

一种可能性是在第一个元素上设置一个右边距

ul{
宽度：100%；
显示器：flex；
flex-flow：行nowrap；
证明内容：柔性端；
对齐项目：居中；
填充：0；
保证金：0；
列表样式：无；
}
李{
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; }

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

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