https://jsfiddle.net/vhem8scs/
Flexbox 是否可以让两个项目左对齐、一个项目右对齐?该链接显示得更清楚。最后一个例子就是我想要实现的目标。
在 Flexbox 中我有一段代码。对于 float,我有四个代码块。这就是我更喜欢 Flexbox 的原因之一。
HTML
<div class="wrap">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>
<!-- DESIRED RESULT -->
<div class="result">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>
CSS
.wrap {
display: flex;
background: #ccc;
width: 100%;
justify-content: space-between;
}
.result {
background: #ccc;
margin-top: 20px;
}
.result:after {
content: '';
display: table;
clear: both;
}
.result div {
float: left;
}
.result div:last-child {
float: right;
}
要将一个 Flex 子项向右对齐,请将其设置为
margin-left: auto;
来自 flex 规范:
主轴中自动边距的一种用途是分隔弹性项目 分成不同的“组”。以下示例展示了如何使用它来 重现常见的 UI 模式 - 带有一些操作的单个操作栏 左侧对齐,其他右侧对齐。
.wrap div:last-child {
margin-left: auto;
}
.wrap {
display: flex;
background: #ccc;
width: 100%;
justify-content: space-between;
}
.wrap div:last-child {
margin-left: auto;
}
.result {
background: #ccc;
margin-top: 20px;
}
.result:after {
content: '';
display: table;
clear: both;
}
.result div {
float: left;
}
.result div:last-child {
float: right;
}
<div class="wrap">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>
<!-- DESIRED RESULT -->
<div class="result">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>
注:
您可以通过在中间的 Flex 项目(或简写
flex:1
)上设置 flex-grow:1 来实现类似的效果,这会将最后一个项目一直推到右侧。 (演示)
然而,明显的区别是中间的项目变得比它可能需要的更大。为弹性项目添加边框以查看差异。
.wrap {
display: flex;
background: #ccc;
width: 100%;
justify-content: space-between;
}
.wrap div {
border: 3px solid tomato;
}
.margin div:last-child {
margin-left: auto;
}
.grow div:nth-child(2) {
flex: 1;
}
.result {
background: #ccc;
margin-top: 20px;
}
.result:after {
content: '';
display: table;
clear: both;
}
.result div {
float: left;
}
.result div:last-child {
float: right;
}
<div class="wrap margin">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>
<div class="wrap grow">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>
<!-- DESIRED RESULT -->
<div class="result">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>
对于简洁的纯 Flexbox 选项,将左对齐项目和右对齐项目分组:
<div class="wrap">
<div>
<span>One</span>
<span>Two</span>
</div>
<div>Three</div>
</div>
并使用
space-between
:
.wrap {
display: flex;
background: #ccc;
justify-content: space-between;
}
通过这种方式,您可以将多个项目分组到右侧(或仅一个)。
将一些元素(headerElement)居中对齐,最后一个元素向右对齐(headerEnd)。
.headerElement {
margin-right: 5%;
margin-left: 5%;
}
.headerEnd{
margin-left: auto;
}
你可以做任何一个
margin-left: auto;
或
position absolute;
right: 0px;
这会将项目移动到右侧。您给出的 px 值会将项目从右推到左。
对于那些将物品居中并希望将最后一件物品放在右侧的人,以下是解决方案:
-将标题设置为 Flex 并将内容对齐为居中 - 创建三个容器,其中第一个和最后一个是 margin: auto; - 对居中的项目使用中间的一个。 -对于最后一个项目,U 将其放入右侧容器中并将其属性设置为 margin-left: auto;
这是我所做的(使用顺风,但它只是 CSS):
<nav class="border-b border-black flex">
<div class="border border-red-600 w-12">Back</div>
<div class="border border-blue-600 w-12">Logo</div>
<div class="border border-green-600 flex-grow text-center">Socializus</div>
<div class="border border-orange-600 w-24">
<div class="w-12 ml-auto border border-pink-600">Menu</div>
</div>
</nav>
这个想法是左右两个部分宽度相同,然后右侧的子部分占用更少的空间