Bagaimana cara meluruskan item fleksibel?

682

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>

http://jsfiddle.net/vqDK9/

Mark Boulder
sumber
2
Anda dapat menggunakan float dengan benar, tetapi dengan cara yang sama ...! Cara terbaik adalah menggunakan tabel tampilan dengan perataan teks.
Yohann Tilotti
Tentu, jika itu lebih baik. Namun masih mengalami kesulitan menyelaraskan "Kontak": jsfiddle.net/vqDK9/1
Mark Boulder
2
Saya memperbarui jsfiddle.net/vqDK9/2
Yohann Tilotti
Inilah setidaknya dua cara untuk melakukannya: stackoverflow.com/a/33856609/3597276
Michael Benjamin

Jawaban:

455

Ini dia Atur justify-content: space-betweenpada wadah fleksibel.

.main { 
    display: flex; 
    justify-content: space-between;
  }
.a, .b, .c { background: #efefef; border: 1px solid #999; }
.b { text-align: center; }
<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>

Kevin Suttle
sumber
291
Ataujustify-content: flex-end
BT
1
Coba atur lebar .c ke 300px. Judul tidak lagi terpusat. Jadi ya, ini menjawab pertanyaan, tetapi ini merusak desain.
Agamemnus
23
Perhatikan bahwa ini tidak selalu bekerja seperti yang Anda harapkan, seperti ketika ada .c::afterelemen pseudo. Dalam pengalaman saya, margin-left: auto;adalah cara untuk pergi.
Will
13
Atauflex-flow: row-reverse;
jchook
8
Saya tidak melihat ini menjadi jawaban yang benar jika Anda tidak ingin menyelaraskan hanya satu item dalam wadah fleksibel.
Foxhoundn
1098

Pendekatan yang lebih fleksibel adalah dengan menggunakan automargin kiri (item fleksibel memperlakukan margin otomatis sedikit berbeda dari ketika digunakan dalam konteks format blok).

.c {
    margin-left: auto;
}

Biola diperbarui:

.main { display: flex; }
.a, .b, .c { background: #efefef; border: 1px solid #999; }
.b { flex: 1; text-align: center; }
.c {margin-left: auto;}
<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>
<h1>Problem</h1>
<p>Is there a more flexbox-ish way to right align "Contact" than to use position absolute?</p>

terpaut
sumber
2
Terima kasih. Apakah Anda lebih suka ini daripada metode tabel tampilan Yohann Tilotti di atas? Jika demikian, mengapa?
Mark Boulder
4
@ MarkBoulder: Untuk alasan kompatibilitas metodenya lebih baik, tetapi jika Anda sudah menggunakan flexbox jawaban saya akan lebih masuk akal.
terpaut
4
@MarkBoulder: Mereka berdua melakukan hal yang sama dalam hal ini. Keuntungannya akan memiliki sifat-sifat lainnya (dan perilaku) yang terkait dengan item fleksibel bahwa pendekatan tabel tidak memiliki ( flex, order, dll).
terpaut
3
Jika Anda tidak dapat membungkus elemen dan Anda perlu mengapung mengatakan tiga hak terakhir, target yang ketiga hanya dari yang terakhir dengan margin-left: auto;gaya ini .
Daniel Sokolowski
2
@ Justin mengetahuinya, tidak perlu membungkusnya - saya tidak bisa dalam kasus saya. Solusinya adalah menargetkan item pertama dari tiga item dengan margin-left: auto;.
Daniel Sokolowski
41

Jika Anda ingin menggunakan flexbox untuk ini, Anda harus bisa, dengan melakukan ini ( display: flexpada wadah, flex: 1pada item, dan text-align: rightpada .c):

.main { display: flex; }
.a, .b, .c {
    background: #efefef;
    border: 1px solid #999;
    flex: 1;
}
.b { text-align: center; }
.c { text-align: right; }

... atau sebagai alternatif (bahkan lebih sederhana), jika barang tidak perlu dipenuhi, Anda dapat menggunakan justify-content: space-betweenwadah dan menghapus text-alignaturan sepenuhnya:

.main { display: flex; justify-content: space-between; }
.a, .b, .c { background: #efefef; border: 1px solid #999; }

Berikut ini demo tentang Codepen untuk memungkinkan Anda dengan cepat mencoba yang di atas.

Nick F
sumber
2
space-betweenpersis apa yang saya cari, terima kasih!
Eddie Fletcher
Perbatasan menghilang saat menggunakan saran kedua, perilaku yang diharapkan? codepen.io/oshihirii/pen/RygKRd
user1063287
38

Anda juga dapat menggunakan pengisi untuk mengisi ruang yang tersisa.

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

.filler{
    flex-grow: 1;
}

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.

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

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



<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>

<style>
.main { display: flex; justify-content: space-between; }
.mainfiller{display: flex;}
.filler{flex-grow:1; text-align:center}
.a, .b, .c { background: yellow; border: 1px solid #999; }
</style>

Arno
sumber
3
Akhirnya seseorang yang mengerti flexbox
Kokodoko
9
@Kokodoko ya, menggunakan satu lagi elemen html non-semantik untuk memindahkan elemen lain adalah yang teratas dalam memahami flexbox ...
Zanshin13
@ Zanshin13 Jawaban yang lain semua menulis begitu banyak css ekstra sehingga Anda mungkin juga meninggalkan wadah fleksibel dan kode semuanya sendiri :)
Kokodoko
2
@Kododoko 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.
Zanshin13
32

Atau Anda bisa menggunakannya justify-content: flex-end

.main { display: flex; }
.c { justify-content: flex-end; }
Melchia
sumber
3
The justify-contentatribut adalah atribut dari flex-wadah, melihat cheatsheet flexy Chris Coyer ini: css-tricks.com/snippets/css/a-guide-to-flexbox
Klaas van der Weij
1
Ini adalah satu-satunya solusi pada halaman ini yang berfungsi untuk saya.
user2847376
19

Semudah

.main {
    display: flex;
    flex-direction:row-reverse;
}
CESCO
sumber
12

Tambahkan kelas CSS berikut ke stylesheet Anda:

.my-spacer {
    flex: 1 1 auto;
}

Tempatkan elemen kosong antara elemen di sebelah kiri dan elemen yang ingin Anda luruskan dengan benar:

<span class="my-spacer"></span>

andreisrob
sumber
Bagi mereka yang tidak hanya ingin meluruskan kanan satu elemen, tetapi mungkin ingin menyelaraskan satu elemen, dan kanan menyelaraskan satu elemen (dalam tata letak flex yang sama) ini adalah cara untuk pergi!
Sensei James
8

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:

h1 {
   flex-basis: 100%; // forces this element to take up any remaining space
}

img {
   margin: 0 5px; // small margin between images
   height: 50px; // image width will be in relation to height, in case images are large - optional if images are already the proper size
}

Begini tampilannya (hanya CSS yang relevan yang disertakan dalam cuplikan di atas)

masukkan deskripsi gambar di sini

TetraDev
sumber
6

'justify-content: flex-end' bekerja dalam wadah kotak harga.

.price-box {
    justify-content: flex-end;
}
Mohammad Adeel
sumber
4

Saya menemukan bahwa menambahkan 'justify-content: flex-end' ke wadah flex memecahkan masalah sementara 'justify-content: space-between' tidak melakukan apa-apa.

malam
sumber
2

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 .

Lindauson
sumber
0

Contoh kode berdasarkan jawaban oleh TetraDev

Gambar di kanan:

* {
  outline: .4px dashed red;
}

.main {
  display: flex;
  flex-direction: row;
  align-items: center;
}

h1 {
  flex-basis: 100%;
}

img {
  margin: 0 5px;
  height: 30px;
}
<div class="main">
  <h1>Secure Payment</h1>
  <img src="https://i.stack.imgur.com/i65gn.png">
  <img src="https://i.stack.imgur.com/i65gn.png">
</div>

Gambar di sebelah kiri:

* {
  outline: .4px dashed red;
}

.main {
  display: flex;
  flex-direction: row;
  align-items: center;
}

h1 {
  flex-basis: 100%;
  text-align: right;
}

img {
  margin: 0 5px;
  height: 30px;
}
<div class="main">
  <img src="https://i.stack.imgur.com/i65gn.png">
  <img src="https://i.stack.imgur.com/i65gn.png">
  <h1>Secure Payment</h1>
</div>

1,21 gigawatt
sumber