有没有比使用position: absolute更灵活的右对齐"触点"的方法?

.main {
  display: flex;
}

.a,
.b,
.c {
  background: #efefef;
  border: 1px solid #999;
}

.b {
  flex: 1;
  text-align: center;
}

.c {
  position: absolute;
  right: 0;
}
<h2>With title</h2>
<div class="main">
  <div class="a"><a href="#">Home</a></div>
  <div class="b"><a href="#">Some title centered</a></div>
  <div class="c"><a href="#">Contact</a></div>
</div>

<h2>Without title</h2>
<div class="main">
  <div class="a"><a href="#">Home</a></div>
  <!--<div class="b"><a href="#">Some title centered</a></div>-->
  <div class="c"><a href="#">Contact</a></div>
</div>

http://jsfiddle.net/vqDK9/

推荐答案

更灵活的方法是使用auto左边距(flex项对auto margins的处理与在块格式上下文中使用时略有不同).

.c {
    margin-left: auto;
}

Updated fiddle:

.main { display: flex; }
.a, .b, .c { background: #efefef; border: 1px solid #999; }
.b { flex: 1; text-align: center; }
.c {margin-left: auto;}
<h2>With title</h2>
<div class="main">
    <div class="a"><a href="#">Home</a></div>
    <div class="b"><a href="#">Some title centered</a></div>
    <div class="c"><a href="#">Contact</a></div>
</div>
<h2>Without title</h2>
<div class="main">
    <div class="a"><a href="#">Home</a></div>
    <!--<div class="b"><a href="#">Some title centered</a></div>-->
    <div class="c"><a href="#">Contact</a></div>
</div>
<h1>Problem</h1>
<p>Is there a more flexbox-ish way to right align "Contact" than to use position absolute?</p>

Html相关问答推荐

为网站上的非 html 文件设置标题和网站图标

如何在输入框上方对齐的单行中对齐标签文本(多语言)

关于自动边距与绝对定位的混淆

如何将不同的 div 相互堆叠(应该是响应式的)

SVG 周围的文字

如何使 SVG 笔画显示背景?

一个 SVG 的多个路径的多个复选框

带弹性框的距离列间距(css)

EM 中的高度不等于按钮和文本区域的相同值

如何按元素的水平对齐文本?

有没有办法将我的 flex 50/50 Split View CSS 转换为 70/30?

如何使用 CSS 为具有透明背景的白色图像着色?

HTML 锚标记占用整行