Apa perbedaan antara tampilan: inline-flex dan tampilan: flex?

331

Saya mencoba menyelaraskan elemen secara vertikal dalam pembungkus ID. Saya memberikan properti display:inline-flex;ke ID ini karena pembungkus ID adalah wadah fleksibel.

Tetapi tidak ada perbedaan dalam presentasi. Saya berharap semua yang ada di ID pembungkus akan ditampilkan inline. Kenapa tidak?

#wrapper {
    display: inline-flex;
    /*no difference to display:flex; */
}
<body>
    <div id="wrapper">
        <header>header</header>
        <nav>nav</nav>
        <aside>aside</aside>
        <main>main</main>
        <footer>footer</footer>
    </div>
</body>
Luaskan cuplikan

css  flexbox 
— astridx
sumber

Jawaban:

407

display: inline-flextidak membuat tampilan item fleksibel sejajar. Itu membuat tampilan wadah fleksibel sejajar. Itulah satu-satunya perbedaan antara display: inline-flexdan display: flex. Perbandingan serupa dapat dibuat antara display: inline-blockdan display: block, dan hampir semua jenis tampilan lain yang memiliki mitra sebaris .1

Sama sekali tidak ada perbedaan efek pada item fleksibel; tata letak flex identik apakah wadah fleksibel level blok atau inline-level. Secara khusus, item fleksibel itu sendiri selalu berperilaku seperti kotak tingkat blok (meskipun mereka memiliki beberapa properti inline-blok). Anda tidak dapat menampilkan item fleksibel sebaris; jika tidak, Anda sebenarnya tidak memiliki tata letak yang fleksibel.

Tidak jelas apa yang sebenarnya Anda maksud dengan "menyelaraskan secara vertikal" atau mengapa Anda ingin menampilkan konten inline, tetapi saya curiga bahwa flexbox bukanlah alat yang tepat untuk apa pun yang Anda coba capai. Kemungkinan yang Anda cari hanyalah tata letak inline biasa ( display: inlinedan / atau display: inline-block), yang flexbox bukan pengganti; flexbox bukanlah solusi tata letak universal yang diklaim semua orang (saya menyatakan ini karena kesalahpahaman mungkin mengapa Anda mempertimbangkan flexbox sejak awal).

1 Perbedaan antara tata letak blok dan tata letak inline berada di luar cakupan pertanyaan ini, tetapi salah satu yang paling menonjol adalah lebar otomatis: kotak level blok merentang secara horizontal untuk mengisi blok yang berisi, sedangkan kotak level inline menyusut agar sesuai dengan pertanyaan mereka. isi. Bahkan, untuk alasan ini saja Anda hampir tidak akan pernah menggunakan display: inline-flexkecuali Anda memiliki alasan yang sangat baik untuk menampilkan inline wadah fleksibel Anda.

— BoltClock
sumber
14
Demo biola yang disempurnakan untuk membedakan inline-flexdan flex: jsfiddle.net/mgr0en3q/1 Biola asli oleh @ fish-graphics and @astridx
— Kevin Law
Jawaban yang sangat membantu. Saya bingung pada awalnya. Ketika saya menerapkan inline flex item flex tidak berubah ketika saya menerapkan dengan tampilan flex juga. Sebenarnya itu berlaku di wadah fleksibel :)
— Faris Rayhan
68

OK, saya tahu pada awalnya mungkin sedikit membingungkan, tetapi displayberbicara tentang elemen induk, jadi berarti ketika kita mengatakan display: flex;:, ini tentang elemen dan ketika kita mengatakan display:inline-flex;, juga membuat elemen itu sendiriinline ...

Ini seperti membuat div inline atau blok , menjalankan snippet di bawah ini dan Anda dapat melihat bagaimana display flexmemecahnya ke baris berikutnya:

.inline-flex {
  display: inline-flex;
}

.flex {
  display: flex;
}

p {
  color: red;
}
<body>
  <p>Display Inline Flex</p>
  <div class="inline-flex">
    <header>header</header>
    <nav>nav</nav>
    <aside>aside</aside>
    <main>main</main>
    <footer>footer</footer>
  </div>

  <div class="inline-flex">
    <header>header</header>
    <nav>nav</nav>
    <aside>aside</aside>
    <main>main</main>
    <footer>footer</footer>
  </div>

  <p>Display Flex</p>
  <div class="flex">
    <header>header</header>
    <nav>nav</nav>
    <aside>aside</aside>
    <main>main</main>
    <footer>footer</footer>
  </div>

  <div class="flex">
    <header>header</header>
    <nav>nav</nav>
    <aside>aside</aside>
    <main>main</main>
    <footer>footer</footer>
  </div>
</body>
Luaskan cuplikan

Juga buat cepat gambar di bawah ini untuk menunjukkan perbedaannya secara sekilas:

display flex vs display inline-flex

— Alireza
sumber
3
Apa yang Anda gunakan untuk gambar ini? Font ini sangat bagus.
— shu
5
Ada kesalahan ketik kecil pada gambar di atas. "display: flex-inline" harus "display: inline-flex" mirip dengan "inline-block", dll.
— AlienKevin
62

flexdan inline-flexkeduanya menerapkan tata letak fleksibel untuk anak-anak wadah. Wadah dengan display:flexberperilaku seperti elemen tingkat blok itu sendiri, sementara display:inline-flexmembuat wadah berperilaku seperti elemen inline.

— Leo
sumber
29

Perbedaan antara "flex" dan "inline-flex"

Jawaban singkat:

Salah satunya inline dan yang lainnya pada dasarnya merespons seperti elemen blok (tetapi memiliki beberapa perbedaan sendiri).

Jawaban yang lebih panjang:

Inline-Flex - Versi inline dari flex memungkinkan elemen, dan itu anak-anak, memiliki sifat flex sementara masih tetap dalam aliran reguler dari dokumen / halaman web. Pada dasarnya, Anda dapat menempatkan dua wadah fleks inline di baris yang sama, jika lebarnya cukup kecil, tanpa ada gaya berlebih yang memungkinkannya ada di baris yang sama. Ini sangat mirip dengan "inline-block."

Lentur - Wadah dan anak-anak itu memiliki sifat lentur tetapi wadah menyimpan baris, karena dikeluarkan dari aliran normal dokumen. Ini merespons seperti elemen blok, dalam hal aliran dokumen. Dua wadah flexbox tidak bisa ada di baris yang sama tanpa gaya berlebihan.

Masalah yang mungkin Anda alami

Karena elemen yang Anda daftarkan dalam contoh Anda, meskipun saya menebak, saya pikir Anda ingin menggunakan flex untuk menampilkan elemen yang terdaftar dalam mode baris demi baris tetapi terus melihat elemen berdampingan.

Alasan Anda kemungkinan mengalami masalah adalah karena flex dan inline-flex memiliki properti "arah-fleksibel" default yang disetel ke "baris." Ini akan menampilkan anak-anak berdampingan. Mengubah properti ini menjadi "kolom" akan memungkinkan elemen Anda menumpuk dan menyimpan ruang (lebar) sama dengan lebar induknya.

Di bawah ini adalah beberapa contoh untuk menunjukkan bagaimana flex vs inline-flex bekerja dan juga demo cepat tentang bagaimana elemen inline vs blok bekerja ...

display: inline-flex; flex-direction: row;

Biola

display: flex; flex-direction: row;

Biola

display: inline-flex; flex-direction: column;

Biola

display: flex; flex-direction: column;

Biola

display: inline;

Biola

display: block

Biola

Juga, dokumen referensi yang bagus: Panduan Lengkap untuk Flexbox - trik css

15

Tampilan: fleksibel menerapkan tata letak flex hanya untuk item fleksibel atau anak-anak wadah saja. Jadi, wadah itu sendiri tetap elemen blok tingkat dan dengan demikian memakan seluruh lebar layar.

Ini menyebabkan setiap wadah fleksibel untuk pindah ke garis baru di layar.

Tampilan: inline-flex menerapkan tata letak flex ke item fleksibel atau anak-anak serta ke wadah itu sendiri. Akibatnya wadah berperilaku sebagai elemen flex inline sama seperti anak-anak dan dengan demikian mengambil lebar yang dibutuhkan oleh barang-barangnya / anak-anak saja dan bukan seluruh lebar layar.

Ini menyebabkan dua atau lebih wadah fleksibel satu demi satu, ditampilkan sebagai inline-flex, sejajarkan diri mereka berdampingan di layar hingga seluruh lebar layar diambil.

— Noor Jahan Mukammel
sumber
1
"terapkan tata letak fleksibel [...] ke wadah itu sendiri" [rujukan?]
— BoltClock
1

Anda memerlukan informasi lebih banyak agar peramban mengetahui apa yang Anda inginkan. Misalnya, anak-anak wadah perlu diberi tahu "bagaimana" untuk melenturkannya.

Biola yang Diperbarui

Saya telah menambahkan #wrapper > * { flex: 1; margin: auto; }ke CSS Anda dan mengubahnya inline-flexmenjadi flex, dan Anda dapat melihat bagaimana elemen-elemennya sekarang meratakan sendiri secara merata pada halaman.

— GRAPHICS FiSH
sumber
2
Terima kasih atas jawaban Anda, tetapi saya tahu saya bisa melakukannya dengan cara ini. Saya hanya salah memahami tampilan properti: inline-flex; - Saya pikir, bahwa properti ini adalah cara yang lebih mudah untuk mencapai target saya. Tetapi di antara hari-hari terakhir saya mengetahui bahwa properti ini hanya membuat tampilan wadah sejajar. Dengan latar belakang yang ditambahkan saya melihat sekarang perbedaan antara tampilan properti: inline-flex; dan tampilan: fleksibel; di sebuah flexbox. jsfiddle.net/vUSmV/101
— astridx
-1

Buka di halaman penuh untuk pemahaman yang lebih baik

.item {
  width : 100px;
  height : 100px;
  margin: 20px;
  border: 1px solid blue;
  background-color: yellow;
  text-align: center;
  line-height: 99px;
}

.flex-con {
  flex-wrap: wrap;
  /* <A>    */
  display: flex;
  /* 1. uncomment below 2 lines by commenting above 1 line */
  /* <B>   */
/*   display: inline-flex; */
	
}

.label {
  padding-bottom: 20px;
}
.flex-inline-play {
  padding: 20px;
  border: 1px dashed green;
/*  <C> */
  width: 1000px;
/*   <D> */
  display: flex;
}
<figure>
  <blockquote>
     <h1>Flex vs inline-flex</h1>
    <cite>This pen is understand difference between
    flex and inline-flex. Follow along to understand this basic property of css</cite>
    <ul>
      <li>Follow #1 in CSS:
        <ul>
          <li>Comment <code>display: flex</code></li>
          <li>Un-comment <code>display: inline-flex</code></li>
        </ul>
      </li>
      <li>
        Hope you would have understood till now. This is very similar to situation of `inline-block` vs `block`. Lets go beyond and understand usecase to apply learning. Now lets play with combinations of A, B, C & D by un-commenting only as instructed:
        <ul>
					<li>A with D -- does this do same job as <code>display: inline-flex</code>. Umm, you may be right, but not its doesnt do always, keep going !</li>
          <li>A with C</li>
          <li>A with C & D -- Something wrong ? Keep going !</li>
          <li>B with C</li>
          <li>B with C & D -- Still same ? Did you learn something ? inline-flex is useful if you have space to occupy in parent of 2 flexboxes <code>.flex-con</code>. That's the only usecase</li>
        </ul>
      </li>
    </ul>
  </blockquote>
  
</figure>
<br/>
 <div class="label">Playground:</div>
<div class="flex-inline-play">
  <div class="flex-con">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
  </div>
  <div class="flex-con">
    <div class="item">X</div>
    <div class="item">Y</div>
    <div class="item">Z</div>
    <div class="item">V</div>
    <div class="item">W</div>
  </div>
</div>
Luaskan cuplikan

— Pawan Gangwani
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.