Apakah ada cara flexbox-ish yang lebih baik untuk meluruskan "Kontak" daripada menggunakan position: absolute
?
.main { display: flex; }
.a, .b, .c { background: #efefef; border: 1px solid #999; }
.b { flex: 1; text-align: center; }
.c { position: absolute; right: 0; }
<h2>With title</h2>
<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>
<h2>Without title</h2>
<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>
Jawaban:
Ini dia Atur
justify-content: space-between
pada wadah fleksibel.sumber
justify-content: flex-end
.c::after
elemen pseudo. Dalam pengalaman saya,margin-left: auto;
adalah cara untuk pergi.flex-flow: row-reverse;
Pendekatan yang lebih fleksibel adalah dengan menggunakan
auto
margin kiri (item fleksibel memperlakukan margin otomatis sedikit berbeda dari ketika digunakan dalam konteks format blok).Biola diperbarui:
sumber
flex
,order
, dll).margin-left: auto;
gaya ini .margin-left: auto;
.Jika Anda ingin menggunakan flexbox untuk ini, Anda harus bisa, dengan melakukan ini (
display: flex
pada wadah,flex: 1
pada item, dantext-align: right
pada.c
):... atau sebagai alternatif (bahkan lebih sederhana), jika barang tidak perlu dipenuhi, Anda dapat menggunakan
justify-content: space-between
wadah dan menghapustext-align
aturan sepenuhnya:Berikut ini demo tentang Codepen untuk memungkinkan Anda dengan cepat mencoba yang di atas.
sumber
space-between
persis apa yang saya cari, terima kasih!Anda juga dapat menggunakan pengisi untuk mengisi ruang yang tersisa.
Saya telah memperbarui solusinya dengan 3 versi berbeda. Ini karena diskusi tentang validitas menggunakan elemen pengisi tambahan. Jika Anda menjalankan kode terpotong Anda melihat bahwa semua solusi melakukan hal yang berbeda. Misalnya pengaturan kelas pengisi pada item b akan membuat item ini mengisi ruang yang tersisa. Ini bermanfaat bahwa tidak ada ruang 'mati' yang tidak dapat diklik.
sumber
justify-content: space-between
"sangat banyak" css, serius? Tidak perlu komentar lebih lanjut (tetapi jika Anda mau - selamat datang untuk mengobrol). Jawaban ini berhak berada di sini, karena ini merupakan solusi. Tapi yang jelas tidak optimal. Idk, mungkin Anda tidak memperhatikan tetapi sebagian besar css dari jawaban lain adalah OP dan jawaban sebenarnya mengurangi (sedikit) jumlah css penulis. Jawaban ini tidak memiliki lebih sedikit css daripada yang lain (tidak akan bekerja tanpa css OP - jsfiddle.net/63ma3b56 ). Tetapi memiliki satu elemen html lagi.Atau Anda bisa menggunakannya
justify-content: flex-end
sumber
justify-content
atribut adalah atribut dari flex-wadah, melihat cheatsheet flexy Chris Coyer ini: css-tricks.com/snippets/css/a-guide-to-flexboxSemudah
sumber
Tambahkan kelas CSS berikut ke stylesheet Anda:
Tempatkan elemen kosong antara elemen di sebelah kiri dan elemen yang ingin Anda luruskan dengan benar:
<span class="my-spacer"></span>
sumber
Jika Anda membutuhkan satu item agar rata kiri (seperti header) tetapi beberapa item kanan rata (seperti 3 gambar), maka Anda akan melakukan sesuatu seperti ini:
Begini tampilannya (hanya CSS yang relevan yang disertakan dalam cuplikan di atas)
sumber
'justify-content: flex-end' bekerja dalam wadah kotak harga.
sumber
Saya menemukan bahwa menambahkan 'justify-content: flex-end' ke wadah flex memecahkan masalah sementara 'justify-content: space-between' tidak melakukan apa-apa.
sumber
Bagi yang menggunakan Angular dan Flex-Layout, gunakan yang berikut ini pada wadah item-fleksibel:
<div fxLayout="row" fxLayoutAlign="flex-end">
Lihat dokumen fxLayoutAlign di sini dan dokumen fxLayout lengkap di sini .
sumber
Contoh kode berdasarkan jawaban oleh TetraDev
Gambar di kanan:
Gambar di sebelah kiri:
sumber