Display: inline-flex ve display: flex arasındaki fark nedir?

331

Bir kimlik sarıcı içindeki öğeleri dikey olarak hizalamaya çalışıyorum. display:inline-flex;Kimlik sarmalayıcı esnek konteyner olduğundan özelliği bu kimliğe verdim .

Ancak sunumda bir fark yoktur. Sarıcı kimliğindeki her şeyin görüntülenmesini bekledim inline. Neden olmasın?

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

Snippet'i genişlet

css flexbox

— astridx
kaynak

407

display: inline-flexesnek öğelerin satır içinde görüntülenmesini sağlamaz . Esnek konteyner ekranını yerinde yapar . Yani arasındaki tek fark display: inline-flexve display: flex. Benzer bir karşılaştırma arasında yapılabilir display: inline-blockve display: blockve hemen hemen bir satır içi meslektaşı olan herhangi diğer görüntüleme türü . ¹

Esnek ürünler üzerindeki etkide kesinlikle hiçbir fark yoktur; esnek düzen, esnek kabın blok düzeyinde mi yoksa satır içi düzeyde mi olduğu ile aynıdır. Özellikle, esnek nesnelerin kendileri her zaman blok düzeyinde kutular gibi davranırlar ( bazı satır içi blok özelliklerine sahip olsalar da ). Esnek öğeleri satır içinde görüntüleyemezsiniz; aksi halde esnek bir düzeniniz yoktur.

"Dikey olarak hizala" ile tam olarak ne demek istediğinizi veya içeriği tam olarak neden satır içinde görüntülemek istediğinizi net değil, ancak flexbox'ın gerçekleştirmeye çalıştığınız her şey için doğru araç olmadığından şüpheleniyorum. Şans aradığınız şey, yalnızca flexbox'ın yerini almayan düz eski satır içi düzen ( display: inlineve / veya display: inline-block) ; flexbox herkesin iddia ettiği evrensel düzen çözümü değildir (bunu belirtiyorum çünkü yanlış anlama muhtemelen flexbox'ı ilk etapta düşünüyor olmanızdır).

¹ _{Blok düzeni ve satır içi düzen arasındaki farklar bu sorunun kapsamı dışındadır, ancak en göze çarpanı otomatik genişliktir: blok düzeyindeki kutular, içerdikleri blokları doldurmak için yatay olarak uzanırken, satır içi kutular içeriği. Aslında, bu nedenle display: inline-flex, esnek konteynerinizi yerinde görüntülemek için çok iyi bir nedeniniz yoksa, neredeyse hiç kullanmayacaksınız .}

— BoltClock
kaynak

14

Farklılaştırmak için gelişmiş keman demosu inline-flexve flex: jsfiddle.net/mgr0en3q/1 @ fish-graphics and @astridx tarafından orijinal keman

— Kevin Law

Kesinlikle yardımcı cevap. İlk defa kafam karıştı. Satır içi esnekliği uyguladığımda, ekran esnekliğiyle de uyguladığımda esnek öğe değişmiyor. Aslında esnek konteynerde geçerlidir :)

— Faris Rayhan

68

Tamam, ilk başta biraz kafa karıştırıcı olabileceğini biliyorum, ama displayüst öğe hakkında konuşuyor, yani demek istediğimizde:, display: flex;bu öğeyle ilgili ve dediğimiz zaman display:inline-flex;öğenin kendisini de yapıyor inline...

Bu marka bir gibi div satır içi veya bloğun , aşağıdaki pasajı çalıştırmak ve nasıl görebilirsiniz display flexsonları sonraki satıra aşağı:

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

Snippet'i genişlet

Ayrıca farkı bir bakışta göstermek için hızlıca aşağıdaki resmi oluşturun:

— Alireza
kaynak

3

Bu resim için ne kullanıyorsun? Bu yazı tipi çok güzel.

— shu

5

Yukarıdaki resimde küçük bir yazım hatası var. "display: flex-inline" olmalıdır "display: inline-flex" "inline-block" vb. gibi

— AlienKevin

62

flexve inline-flexher ikisi de kabın çocuklarına esnek düzen uygular. Konteyner, display:flexblok düzeyinde bir eleman display:inline-flexgibi davranırken, konteyner bir satır içi eleman gibi davranır.

— Aslan burcu
kaynak

29

"Flex" ve "inline-flex" arasındaki fark

Kısa cevap:

Biri satır içi ve diğeri temelde bir blok öğesi gibi yanıt verir (ancak bazı farklılıkları vardır).

Daha uzun cevap:

Inline-Flex - Flex'in satır içi sürümü, öğenin ve alt öğelerin, belgenin / web sayfasının normal akışında kalırken esnek özelliklere sahip olmasını sağlar. Temel olarak, genişlikler yeterince küçükse, aynı satırda var olmalarına izin vermek için fazla bir stil olmadan, aynı sıraya iki satır içi esnek kap yerleştirebilirsiniz. Bu, "satır içi blok" a oldukça benzer.

Esnek - Kap ve alt öğelerinin esnek özellikleri vardır, ancak kap belgenin normal akışından çıkarıldığı için sırayı saklar. Belge akışı açısından bir blok elemanı gibi yanıt verir. Aşırı şekillendirme olmadan aynı satırda iki esnek kutu bulunamazdı.

Karşılaşabileceğiniz sorun

Örneğinizde listelediğiniz öğeler nedeniyle, tahmin etsem de, sanırım sıralı bir şekilde listelenen öğeleri görüntülemek için flex kullanmak istiyorsunuz, ancak öğeleri yan yana görmeye devam ediyorsunuz.

Sorun yaşamanızın nedeni, flex ve inline-flex öğelerinin varsayılan "flex-direction" özelliğinin "row" olarak ayarlanmış olmasıdır. Bu, çocukları yan yana görüntüler. Bu özelliğin "sütun" olarak değiştirilmesi, öğelerinizin üst öğesinin genişliğine eşit alan (genişlik) istiflemesine ve ayırmasına olanak tanır.

Aşağıda, flex'in inline-flex'in nasıl çalıştığını gösteren bazı örnekler ve ayrıca inline vs blok elemanlarının nasıl çalıştığının hızlı bir demosu ...

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

Vaktini boşa harcamak

display: flex; flex-direction: row;

Vaktini boşa harcamak

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

Vaktini boşa harcamak

display: flex; flex-direction: column;

Vaktini boşa harcamak

display: inline;

Vaktini boşa harcamak

display: block

Vaktini boşa harcamak

Ayrıca, harika bir referans dokümanı: Flexbox için Tam Bir Kılavuz - css tricks

15

Gösterge: flex , sadece kabın flex ürünlerine veya alt öğelerine flex düzenini uygular. Böylece, kabın kendisi bir blok seviyesi elemanı olarak kalır ve böylece ekranın tüm genişliğini alır.

Bu, her esnek kabın ekranda yeni bir satıra taşınmasına neden olur.

Ekran: inline-flex , esnek eşyalara veya çocuklara ve kabın kendisine esnek düzen uygular. Sonuç olarak kap, tıpkı çocukların yaptığı gibi satır içi bir esnek eleman gibi davranır ve böylece ekranın tüm genişliğini değil, yalnızca öğelerinin / çocuklarının gerektirdiği genişliği alır.

Bu, iki veya daha fazla esnek kabın birbiri ardına satır içi esnek olarak görüntülenmesine, ekranın tüm genişliği alınana kadar ekranda yan yana hizalanmasına neden olur.

— Noor Jahan Mukammel
kaynak

1

"esnek yerleşimi [...] kabın kendisine uygulayın" [alıntı gerekli]

— BoltClock

1

Tarayıcının ne istediğini bilmesi için biraz daha bilgiye ihtiyacın var. Örneğin, kabın çocuklarına "nasıl" esnetilecekleri söylenmelidir.

Güncellenmiş Keman

Ben ekledik #wrapper > * { flex: 1; margin: auto; }sizin CSS ve değiştirilemez inline-flexiçin flex, ve sayfada eşit nasıl elemanları şimdi uzay kendilerini dışarı görebilirsiniz.

— FİKS GRAFİKLERİ
kaynak

2

Cevabınız için teşekkür ederim, ancak bu şekilde yapabileceğimi biliyordum. Ben sadece özellik ekranı yanlış anladım: inline-flex; - Bu mülkün hedefime ulaşmak için daha kolay bir yol olduğunu düşündüm. Ancak son günler arasında bu özelliğin yalnızca kapsayıcıyı satır içinde görüntülediğini öğrendim. Eklenen bir arka plan ile şimdi özellikler ekranı arasındaki farkı görüyorum: inline-flex; ve display: flex; bir flexbox'ta. jsfiddle.net/vUSmV/101

— astridx

-1

Daha iyi anlamak için Tam sayfada aç

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

Snippet'i genişlet

— Pawan Gangwani
kaynak