我如何对齐一个项目的权利与弹性框？

Https://jsfiddle.net/vhem8scs/

是否有可能有两个项目对齐左和一个项目对齐右与弹性框？链接显示得更清楚。最后一个例子是我想达到的目标。

在 Flexbox 中，我有一段代码。使用 float 我有四个代码块。这就是为什么我更喜欢弹簧盒的原因之一。

超文本标示语言

<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;
}
341674 次浏览
小开
最佳答案

要将一个flex子代向右对齐，请使用__abc0设置它

从flex规范:

auto margin在主轴上的一个用途是分隔伸缩项 分成不同的“组”。下面的例子展示了如何使用它 重现一个通用的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:1)上设置flex-grow:1来达到类似的效果，这将把最后一项一直推到右边。(演示< a href = " https://jsfiddle.net/danield770/vhem8scs/3/ " > < / >)

然而，明显的区别是，中间的项目变得比它可能需要的更大。为伸缩项添加边框以查看差异。

演示< a href = " https://jsfiddle.net/danield770/vhem8scs/4/ " > < / >

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

通过这种方式，您可以将多个项目分组到右侧(或只有一个)。

https://jsfiddle.net/c9mkewwv/3/

小开

将一些元素(headerElement)对齐在中间，并将最后一个元素(headerEnd)对齐在右边。

.headerElement {
margin-right: 5%;
margin-left: 5%;
}
.headerEnd{
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>

其原理是，左边和右边的两个部分宽度相同，那么右边的子部分占用的空间更少

菜单居中

小开

你可以任意选择

margin-left: auto;

或

position absolute;
right: 0px;

这将把项目移到右边。你给出的px值将把项目从右边推到左边。


提交答案