Flexbox ile iki öğenin sola ve bir öğenin sağa hizalanması mümkün mü? Bağlantı daha net gösteriyor. Son örnek benim elde etmek istediğim şey.
Flexbox'ta bir kod bloğum var. Float ile dört kod bloğum var. Flexbox'ı tercih etmemin bir nedeni de bu.
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;
}
Bir esnek çocuğu sağa hizalamak için margin-left: auto;
ile ayarlayın.
flex spec]1'den:
Ana eksende otomatik kenar boşluklarının bir kullanımı esnek öğeleri ayırmaktır farklı "gruplar" halinde. Aşağıdaki örnekte bunun nasıl kullanılacağı gösterilmektedir yaygın bir kullanıcı arayüzü modelini yeniden üretir - bazı eylemler içeren tek bir çubuk sola hizalanmış ve diğerleri sağa hizalanmıştır.
.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:
Benzer bir etkiyi ortadaki flex öğesinde flex-grow:1 (veya kısaltması flex:1
) ayarlayarak elde edebilirsiniz, bu da son öğeyi sonuna kadar sağa itecektir. ([Demo][3])
Ancak bariz fark, ortadaki öğenin olması gerekenden daha büyük hale gelmesidir. Farkı görmek için esnek öğelere bir kenarlık ekleyin.
.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>
Kısa ve saf bir flexbox seçeneği için sola hizalı öğeleri ve sağa hizalı öğeleri gruplayın:
<div class="wrap">
<div>
<span>One</span>
<span>Two</span>
</div>
<div>Three</div>
</div>
ve space-between
kullanın:
.wrap {
display: flex;
background: #ccc;
justify-content: space-between;
}
Bu şekilde birden fazla öğeyi sağda gruplayabilirsiniz (veya sadece bir tane).