如何右对齐flex项目？

作者

是否有一种更灵活的右对齐方式；联络；而不是使用位置：绝对

.main{
显示器：flex；
}
A.
B
c{
背景：#efef；
边框：1px实心#999；
}
.b{
弹性：1；
文本对齐：居中；
}
c{
位置：绝对位置；
右：0；
}
&lt；h2&gt；标题为&lt/h2&gt；
&lt；div class=“main”&gt；
&lt；div class=“a”&gt&书信电报；a href=“”&gt；主页&lt/a&gt&lt/部门&gt；
&lt；div class=“b”&gt&书信电报；a href=“”&gt；一些以标题为中心&lt/a&gt&lt/部门&gt；
&lt；div class=“c”&gt&书信电报；a href=“”&gt；联系&lt/a&gt&lt/部门&gt；
&lt/部门&gt；
&lt；h2&gt；没有头衔&lt/h2&gt；
&lt；div class=“main”&gt；
&lt；div class=“a”&gt&书信电报；a href=“”&gt；主页&lt/a&gt&lt/部门&gt；
&lt--&书信电报；div class=“b”&gt&书信电报；a href=“”&gt；一些以标题为中心&lt/a&gt&lt/部门&gt--&燃气轮机；
&lt；div class=“c”&gt&书信电报；a href=“”&gt；联系&lt/a&gt&lt/部门&gt；
&lt/部门&gt

http://jsfiddle.net/vqDK9/

一种更灵活的方法是使用auto左边距（flex项处理自动边距的方式与在块格式上下文中使用时略有不同）

.c{
左边距：自动；
}

更新的小提琴：

.main{display:flex；}
.a、.b、.c{背景：#efefef；边框：1px实心#999；}
.b{flex:1；文本对齐：居中；}
.c{左边距：自动；}
&lt；h2&gt；标题为&lt/h2&gt；
&lt；div class=“main”&gt；
&lt；div class=“a”&gt&书信电报；a href=“”&gt；主页&lt/a&gt&lt/部门&gt；
&lt；div class=“b”&gt&书信电报；a href=“”&gt；一些以标题为中心&lt/a&gt&lt/部门&gt；
&lt；div class=“c”&gt&书信电报；a href=“”&gt；联系&lt/a&gt&lt/部门&gt；
&lt/部门&gt；
&lt；h2&gt；没有头衔&lt/h2&gt；
&lt；div class=“main”&gt；
&lt；div class=“a”&gt&书信电报；a href=“”&gt；主页&lt/a&gt&lt/部门&gt；
&lt--&书信电报；div class=“b”&gt&书信电报；a href=“”&gt；一些以标题为中心&lt/a&gt&lt/部门&gt--&燃气轮机；
&lt；div class=“c”&gt&书信电报；a href=“”&gt；联系&lt/a&gt&lt/部门&gt；
&lt/部门&gt；
&lt；h1&gt；问题&lt/h1&gt；
&lt；p&gt；与使用绝对位置相比，是否有更灵活的方法右对齐“触点”/p&gt

相关文章：

  1. 如何使图元水平居中
  2. 使用CSS更改HTML5输入的占位符颜色
  3. 为什么HTML认为“chucknorris”是一种颜色？
  4. 在CSS中设置单元格填充和单元格间距？

发表评论

© 2026 开发百科-程序代码问答平台 • Built with