Bir satırdaki flexbox, left-align ve right-align öğelerini kullanma

Question

Eski günlerde iki kapsayıcı kullanmış ve bir tane sola, diğerini de clearfix kullanarak süzülmüştür. Ancak, bu yöntemin şu anda iyi desteklenmiş esnek yeteneklerle biraz eski olduğunu düşünüyorum.

Sorun şu ki, bunu flex kullanarak nasıl yerleştireceğimi bilmiyorum.

Bazı düğmelerle ilgili ekran görüntüsü. İkincil eylem sola hizalanmış ve diğer iki birincil eylem doğru hizalanmış olmalıdır. İşte

biçimlendirme ben edilir:

<footer> 
    <button>Back</button> 
    <span class="primary-btns"> 
     <button>Cancel</button> 
     <button>Go</button> 
    </span> 
</footer> 

birisi burada kullanması gereken esnek Ne CSS yöntemleri söyleyebilir?

Answer 1

sadece justify-content: space-between

footer { 
 
    display: flex; 
 
    justify-content: space-between; 
 
}

<footer> 
 
    <button>Back</button> 
 
    <span class="primary-btns"> 
 
    <button>Cancel</button> 
 
    <button>Go</button> 
 
    </span> 
 
</footer>

Update kullanabilirsiniz: Ayrıca margin-left: autoDEMO

Answer 2

ile span olmadan yapabilirsiniz Hatta bu durumda iç içe geçmiş bir konteyner gerekmez .

Modern CSS teknolojileri (esnek ve ızgara) bu düzeni basitleştirir ve yalnızca bir kapsayıcı gerektirir.

footer { 
 
    display: flex; 
 
} 
 

 
button:first-child { 
 
    margin-right: auto; 
 
} 
 

 
button { 
 
    margin: 5px; 
 
}

<footer> 
 
    <button>Back</button> 
 
    <button>Cancel</button> 
 
    <button>Go</button> 
 
</footer>

Flex oto marjları

belirtilen yönde tüm boş alan tüketir.

Bu da çalışmaya devam eder:

button:nth-child(2) { margin-left: auto } 

Hepsi hakkında oto marjları burada: Methods for Aligning Flex Items