如何右对齐弹性项目？

本文翻译自：How to Right-align flex item?

Is there a more flexbox-ish way to right-align "Contact" than to use position: absolute ? 与使用position: absolute相比，有没有更多的flexbox-ish方式来使“ Contact”右对齐？

 .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/ http://jsfiddle.net/vqDK9/

#1楼

参考：https://stackoom.com/question/1W6o7/如何右对齐弹性项目

#2楼

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). 更加灵活的方法是使用auto左页边距（与在块格式化上下文中使用时相比，灵活项对自动页边距的处理有些不同）。

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

#3楼

If you want to use flexbox for this, you should be able to, by doing this ( display: flex on the container, flex: 1 on the items, and text-align: right on .c ): 如果要为此使用flexbox，则应该能够这样做（在容器上display: flex ，在项目上display: flex flex: 1 ，在.c上显示text-align: right ）：

.main { display: flex; }
.a, .b, .c {background: #efefef;border: 1px solid #999;flex: 1;
}
.b { text-align: center; }
.c { text-align: right; }

...or alternatively (even simpler), if the items don't need to meet, you can use justify-content: space-between on the container and remove the text-align rules completely: ...或更可替代地（甚至更简单），如果不需要满足这些条件，则可以在容器上使用justify-content: space-between ，并完全删除text-align规则：

.main { display: flex; justify-content: space-between; }
.a, .b, .c { background: #efefef; border: 1px solid #999; }

Here's a demo on Codepen to allow you to quickly try the above. 这是Codepen上的演示，可让您快速尝试上述操作。

#4楼

Here you go. 干得好。 Set justify-content: space-between on the flex container. 在flex容器上设置justify-content: space-between 。

 .main { display: flex; justify-content: space-between; } .a, .b, .c { background: #efefef; border: 1px solid #999; } .b { text-align: center; }

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

#5楼

You can also use a filler to fill the remaining space. 您也可以使用填充物填充剩余空间。

<div class="main"><div class="a"><a href="#">Home</a></div><div class="b"><a href="#">Some title centered</a></div><div class="filler"></div><div class="c"><a href="#">Contact</a></div>
</div>.filler{flex-grow: 1;
}

I have updated the solution with 3 different versions. 我已经用3个不同的版本更新了解决方案。 This because of the discussion of the validity of using an additional filler element. 这是因为讨论了使用附加填充元素的有效性。 If you run the code snipped you see that all solutions do different things. 如果您运行了代码片段，则会看到所有解决方案都做不同的事情。 For instance setting the filler class on item b will make this item fill the remaining space. 例如，在项目b上设置填充器类别将使该项目填充剩余空间。 This has the benefit that there is no 'dead' space that is not clickable. 这样做的好处是，没有不可单击的“死”空间。

 <div class="mainfiller"> <div class="a"><a href="#">Home</a></div> <div class="b"><a href="#">Some title centered</a></div> <div class="filler"></div> <div class="c"><a href="#">Contact</a></div> </div> <div class="mainfiller"> <div class="a"><a href="#">Home</a></div> <div class="filler b"><a href="#">Some title centered</a></div> <div class="c"><a href="#">Contact</a></div> </div> <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> <style> .main { display: flex; justify-content: space-between; } .mainfiller{display: flex;} .filler{flex-grow:1; text-align:center} .a, .b, .c { background: yellow; border: 1px solid #999; } </style>

#6楼

If you need one item to be left aligned (like a header) but then multiple items right aligned (like 3 images), then you would do something like this: 如果您需要将一项左对齐（例如标题），然后将多项右对齐（例如3张图像），则可以执行以下操作：

h1 {flex-basis: 100%; // forces this element to take up any remaining space
}img {margin: 0 5px; // small margin between imagesheight: 50px; // image width will be in relation to height, in case images are large - optional if images are already the proper size
}

Here's what that will look like (only relavent CSS was included in snippet above) 这就是它的样子（上面的片段中仅包含了relavent CSS）

如何右对齐弹性项目？相关推荐

具有左，中或右对齐项的Bootstrap NavBar
本文翻译自:Bootstrap NavBar with left, center or right aligned items In Bootstrap , what is the most plat ...
input内容右对齐_STM32学习笔记—DAC基础内容及常见问题
DAC,Digital-to-Analog Converter(数模转换器),DA转换和AD转换有着同样重要的作用,在许多场合都能看到DAC的应用. 今天是第8篇分享,<STM32学习笔记> ...
mathtype中手工实现公式编号右对齐及快捷键
转自:http://blog.sina.com.cn/s/blog_656681710100l3it.html (转自:http://klqingshui.blog.163.com/blog/stat ...
注册表单是要左对齐还是右对齐
上一篇围绕对齐和连续流这两个设计原则,谈了信息设计中用到的几种对齐方法以及和连续流的关联,这一篇尝试用这些原则分析注册表单选项该怎么设计. 注册表单,也就是我们在注册网络产品或者填写信用卡申请表时的东 ...
HTML span标签如何居中和右对齐？这里有HTML span标签的样式解析
本篇文章主要的讲述的是在HTML中的span标签的文本是要如何居中和右对齐的,这里还有各种实例说明,下面就让我们一起来看看吧首先我们来看看HTML span属性如何居中的? 其实想要这个span文本 ...
Linux开发板显示字体右对齐,一种命令行右侧对齐显示的方法、设备及介质与流程...
本发明涉及计算机软件领域,更具体地,特别是指一种命令行右侧对齐显示的方法.设备及可读介质. 背景技术: 在通常情况下编写c/c++命令行应用程序时,命令行界面的输出往往由操作系统控制,在遇到对显示格式 ...
input type右对齐与只读的
右对齐的 <input type="text" style="background:'#efefef'; text-align:right" readon ...
R语言ggplot2可视化使用vjust和hjust参数对齐图像中的文本注释信息（左对齐、右对齐、居中）实战
R语言ggplot2可视化使用vjust和hjust参数对齐图像中的文本注释信息(左对齐.右对齐.居中)实战目录
将选定的文本对象左对齐、右对齐或对中
;; ;;程序名称:对象水平对齐程序 ;;执行命令:TXTAL ;;程序功能:将选定的对象左对齐.右对齐或对中. ;; (defun c:TXTAL(/ selobjs oldcmdecho) ;定义 ...

如何右对齐弹性项目？

#1楼

#2楼

#3楼

#4楼

#5楼

#6楼

如何右对齐弹性项目？相关推荐

最新文章

热门文章