Bagaimanakah Saya Boleh Menjajarkan Kanan Item Fleksibel Tanpa `kedudukan: mutlak`?

Alternatif Flexbox untuk Penjajaran Kanan

Dalam susun atur flexbox, seseorang mungkin menghadapi keperluan untuk menjajarkan item flex ke kanan. Pendekatan biasa menggunakan kedudukan: mutlak boleh menjadi terhad. Artikel ini meneroka penyelesaian flexbox yang lebih sesuai.

Kod awal menunjukkan penggunaan kedudukan: mutlak untuk menjajarkan item flex "Kenalan":

.c {
    position: absolute;
    right: 0;
}

Walau bagaimanapun, yang lebih berorientasikan flexbox pendekatan menggunakan tetapan auto untuk jidar kiri. Item fleksibel mengendalikan margin auto secara berbeza daripada konteks pemformatan blok. Dengan menetapkan jidar kiri kepada auto, item flex mengembang untuk mengisi ruang yang tersedia dan meletakkan dirinya secara automatik ke kanan.

.c {
    margin-left: auto;
}

Kod yang dikemas kini ini berjaya menyelaraskan item fleksibel "Hubungi" tanpa perlu untuk jawatan: mutlak.

Kod Kemas Kini Coretan:

.main {
    display: flex;
}

.a,
.b,
.c {
    background: #efefef;
    border: 1px solid #999;
}

.b {
    flex: 1;
    text-align: center;
}

.c {
    margin-left: auto;
}

<div class="main">
    <div class="a"><a href="#">Home</a></div>
    <div class="b"><a href="#">Some title centered</a></div>
    <div class="c"><a href="#">Contact</a></div>
</div>

Penyelesaian ini mematuhi falsafah flexbox, menyediakan cara yang lebih bersih dan lebih fleksibel untuk mencapai reka letak sejajar yang diingini.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menjajarkan Kanan Item Fleksibel Tanpa `kedudukan: mutlak`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!