文章/答案/技术大牛

发布

社区首页 >问答首页 >CSS :如何将柔性箱容器的子元素对齐到主轴的另一端？

问CSS :如何将柔性箱容器的子元素对齐到主轴的另一端？
EN

Stack Overflow用户

提问于 2015-09-12 15:16:58

回答 5查看 8.4K关注 0票数 16

我正在设计一个网页的标题。我希望标题是一个单行，其中包括一个标志和一些导航链接。我觉得最好，最现代的方式布局这个标题今天是与CSS3 3的柔箱，所以这是我想要使用的。

我希望徽标在flex容器中尽可能的左边，其余的导航项目尽可能地向右。这可以很容易地通过浮动元素左右浮动，但这不是我想要做的。所以..。

如何将柔性箱容器的子元素对齐到主轴的另一端？

flexbox子元素有一个属性，允许您在交叉轴( align-self )上这样做，但是在主轴上似乎没有这样做。

实现这一目标的最佳方法是在徽标和导航链接之间插入一个额外的、空的元素作为间隔。但是，我选择使用这个标题的部分原因是为了配合响应性的设计，我不知道如何使间隔元素占用所有剩余的空间，而不管查看窗口的宽度如何。

这是我目前站在标记的位置，简化为只包括与这种情况有关的因素。

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

flexbox

html

css

Stack Overflow用户

发布于 2015-09-13 17:21:50

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

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; 
  margin-right: auto;  /* create a right margin as needed */
}  
#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>
  <!-- Should be as far right as possible -->
  <li>Home</li>
  <li>Products</li>
  <li>Price Sheet</li>
  <li>Capabilities</li>
  <li>Contact</li>
</ul>

票数 0

查看全部 5 条回答

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/32540409

复制

相似问题

问CSS :如何将柔性箱容器的子元素对齐到主轴的另一端？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS :如何将柔性箱容器的子元素对齐到主轴的另一端？EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS :如何将柔性箱容器的子元素对齐到主轴的另一端？
EN