Este posibil să aibă două elemente aliniați la stânga și un singur element aliniere la dreapta cu flexbox? Link-ul arată mai clar. Ultimul exemplu este ceea ce doresc să realizeze.
În flexbox am un singur bloc de cod. Cu float am patru blocuri de cod. Asta este un motiv pentru care prefer 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;
}
Pentru a alinia un flex copilul la dreapta set cu'margin-left: auto;`
De flex spec:
O utilizarea de auto marjele pe axa principală este de a separa flex elemente în distinctă "grupuri". Următorul exemplu arată cum să utilizați acest lucru pentru a reproduce o comună model UI - un singur bara de acțiuni cu unele aliniat la stânga și alții aliniat pe dreapta.
.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>
Notă:
Ai putea obține un efect similar prin stabilirea flex-cresc:1 pe mijloc flex element (sau prescurtat flex:1
), care ar împinge ultimul element tot drumul spre dreapta. ([Demo][3])
Diferența evidentă este însă faptul că elementul de mijloc devine mai mare decât ar putea avea nevoie să fie. Adăugați un chenar la flex elemente pentru a vedea diferența.
.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>
Pentru un terț, pur flexbox opțiune, grup aliniat la stânga articole și aliniate elemente:
<div class="wrap">
<div>
<span>One</span>
<span>Two</span>
</div>
<div>Three</div>
</div>
și de a folosi spațiu-între
:
.wrap {
display: flex;
background: #ccc;
justify-content: space-between;
}
În acest fel puteți grupa mai multe elemente la dreapta(sau doar unul).