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>

Luaskan cuplikan

http://jsfiddle.net/vqDK9/

html css flexbox

— 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

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>

Luaskan cuplikan

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

Luaskan cuplikan

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

Luaskan cuplikan

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

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

Luaskan cuplikan

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>

Luaskan cuplikan

— 1,21 gigawatt
sumber