Er det mulig å justere to elementer til venstre og ett element til høyre med flexbox? Lenken viser det tydeligere. Det siste eksemplet er det jeg ønsker å oppnå.
I flexbox har jeg én kodeblokk. Med float har jeg fire kodeblokker. Det er en av grunnene til at jeg foretrekker 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;
}
For å justere ett flex-barn til høyre angir du margin-left: auto;
.
Fra flex spec:
En måte å bruke automatiske marginer i hovedaksen på er å skille flex-elementer i distinkte "grupper". Følgende eksempel viser hvordan dette kan brukes til å til å reprodusere et vanlig brukergrensesnittmønster - en enkelt handlingslinje med noen av elementene justert til venstre og andre justert til høyre.
.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>
Merk:
Du kan oppnå en lignende effekt ved å sette flex-grow:1 på det midterste flex-elementet (eller forkortelsen flex:1
), som vil skyve det siste elementet helt til høyre. ([Demo][3])
Den åpenbare forskjellen er imidlertid at det midterste elementet blir større enn det kanskje trenger å være. Legg til en kant til flex-elementene for å se forskjellen.
.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>
For et kortfattet, rent flexbox-alternativ kan du gruppere de venstrejusterte elementene og de høyrejusterte elementene:
<div class="wrap">
<div>
<span>One</span>
<span>Two</span>
</div>
<div>Three</div>
</div>
og bruk space-between
:
.wrap {
display: flex;
background: #ccc;
justify-content: space-between;
}
På denne måten kan du gruppere flere elementer til høyre (eller bare ett).