如何右对齐弹性项目? [英] How to Right-align flex item?

问题描述

是否有一种更像 flexbox 的方式来右对齐联系人"?而不是使用 position: absolute?

.main {显示:弹性；}.一个，.b,.C {背景:#efefef;边框:1px 实心 #999；}.b {弹性:1；文本对齐:居中；}.C {位置:绝对；右:0；}

<h2>带标题</h2><div class="main"><div class="a"><a href="#">首页</a></div><div class="b"><a href="#">一些标题居中</a></div><div class="c"><a href="#">联系方式</a></div>

<h2>没有标题</h2><div class="main"><div class="a"><a href="#">首页</a></div><!--<div class="b"><a href="#">一些标题居中</a></div>--><div class="c"><a href="#">联系方式</a></div>

http://jsfiddle.net/vqDK9/

解决方案

更灵活的方法是使用 auto 左边距(flex itemstreat 自动外边距 与在块格式上下文中使用时有点不同).

.c {左边距:自动；}

更新小提琴:

.main { display: flex;}.a, .b, .c { 背景:#efefef;边框:1px 实心 #999；}.b { 弹性: 1;文本对齐:居中；}.c {margin-left: auto;}

<h2>带标题</h2><div class="main"><div class="a"><a href="#">首页</a></div><div class="b"><a href="#">一些标题居中</a></div><div class="c"><a href="#">联系方式</a></div>

<h2>没有标题</h2><div class="main"><div class="a"><a href="#">首页</a></div><!--<div class="b"><a href="#">一些标题居中</a></div>--><div class="c"><a href="#">联系方式</a></div>

<h1>问题</h1><p>右对齐Contact"是否有比使用绝对位置更像 flexbox 的方式?</p>

Is there a more flexbox-ish way to right-align "Contact" than to use 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/

解决方案

A more flex approach would be to use an auto left margin (flex items treat auto margins a bit differently than when used in a block formatting context).

.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>

这篇关于如何右对齐弹性项目?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！