อะไรคือความแตกต่างระหว่างจอแสดงผล: อินไลน์เฟล็กซ์และจอแสดงผล: เฟล็กซ์?

331

ฉันกำลังพยายามจัดองค์ประกอบในแนวตั้งภายใน wrapper ID ฉันให้ทรัพย์สินdisplay:inline-flex;แก่ ID นี้เนื่องจาก ID wrapper เป็น flex container

แต่การนำเสนอไม่แตกต่างกัน ฉันคาดว่าทุกอย่างในรหัส wrapper จะปรากฏinlineขึ้น ทำไมไม่เป็นเช่นนั้น?

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

ขยายตัวอย่างข้อมูล

css flexbox

— astridx
แหล่งที่มา

407

display: inline-flexไม่ทำให้รายการ flexแสดงแบบอินไลน์ มันทำให้แสดงคอนเทนเนอร์แบบยืดหยุ่นแบบอินไลน์ นั่นเป็นข้อแตกต่างระหว่างdisplay: inline-flexและdisplay: flexเท่านั้น การเปรียบเทียบที่คล้ายกันสามารถทำระหว่างdisplay: inline-blockและdisplay: blockและสวยมาก ๆ ประเภทการแสดงผลอื่น ๆ ที่มีคู่แบบอินไลน์ ¹

ไม่มีผลแตกต่างอย่างแน่นอนในรายการเฟล็กซ์ เค้าโครงเฟล็กซ์จะเหมือนกันไม่ว่าจะเป็นคอนเทนเนอร์เฟล็กซ์ในระดับบล็อกหรือระดับอินไลน์ โดยเฉพาะอย่างยิ่งไอเท็มเฟล็กจะทำตัวเหมือนกล่องระดับบล็อกเสมอ (แม้ว่าจะมีคุณสมบัติบางอย่างของบล็อกอินไลน์) คุณไม่สามารถแสดงรายการ flex แบบอินไลน์ ไม่เช่นนั้นคุณจะไม่มีเลย์เอาต์ที่ยืดหยุ่น

ไม่ชัดเจนว่าคุณหมายถึงอะไรโดย "จัดแนวตั้ง" หรือทำไมคุณต้องการแสดงเนื้อหาแบบอินไลน์ แต่ฉันสงสัยว่า flexbox ไม่ใช่เครื่องมือที่เหมาะสมสำหรับสิ่งที่คุณพยายามจะทำ โอกาสเป็นสิ่งที่คุณกำลังมองหาเป็นเพียงรูปแบบอินไลน์แบบเก่า (display: inlineและ / หรือdisplay: inline-block) ซึ่ง flexbox ไม่ได้มาแทนที่ flexbox ไม่ใช่โซลูชันเลย์เอาต์สากลที่ทุกคนอ้างว่าเป็น (ฉันระบุสิ่งนี้เพราะความเข้าใจผิดอาจเป็นสาเหตุที่คุณกำลังพิจารณา flexbox ตั้งแต่แรก)

¹ _{ความแตกต่างระหว่างเลย์เอาต์บล็อกและเลย์เอาต์อินไลน์อยู่นอกขอบเขตของคำถามนี้ แต่สิ่งที่โดดเด่นที่สุดคือความกว้างอัตโนมัติ: กล่องระดับบล็อกยืดตามแนวนอนเพื่อเติมบล็อกที่บรรจุในขณะที่กล่องอินไลน์ระดับลดขนาดลง เนื้อหา ที่จริงแล้วด้วยเหตุผลนี้เพียงอย่างเดียวคุณแทบจะไม่เคยใช้เลยdisplay: inline-flexเว้นแต่ว่าคุณจะมีเหตุผลที่ดีมากที่จะแสดงตู้คอนเทนเนอร์แบบอินไลน์}

— BoltClock
แหล่งที่มา

14

การสาธิตซอเพิ่มขึ้นเพื่อแยกความแตกต่างinline-flexและflex: jsfiddle.net/mgr0en3q/1 ซอดั้งเดิมโดย @ fish-graphics และ @astridx

— Kevin Law

คำตอบที่เป็นประโยชน์อย่างแน่นอน ฉันสับสนในครั้งแรก เมื่อฉันใช้ flex แบบอินไลน์รายการเฟล็กซ์จะไม่เปลี่ยนแปลงเมื่อฉันใช้กับดิ้นจอแสดงผลเกินไป จริงๆแล้วมันสมัครได้ที่ตู้คอนเทนเนอร์ดิ้น :)

— Faris Rayhan

68

ตกลงฉันรู้ว่าในตอนแรกอาจจะสับสนเล็กน้อย แต่displayกำลังพูดถึงองค์ประกอบหลักดังนั้นหมายความว่าเมื่อเราพูดว่า: display: flex;มันเกี่ยวกับองค์ประกอบและเมื่อเราพูดdisplay:inline-flex;ก็ทำให้องค์ประกอบเองinline...

มันเหมือนกับการทำdiv แบบอินไลน์หรือบล็อกให้เรียกใช้ตัวอย่างด้านล่างและคุณสามารถดูว่าการdisplay flexแบ่งย่อยเป็นบรรทัดถัดไป:

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

ขยายตัวอย่างข้อมูล

สร้างรูปภาพด้านล่างเพื่อแสดงความแตกต่างได้อย่างรวดเร็วด้วย:

— Alireza
แหล่งที่มา

3

คุณใช้อะไรในภาพนี้ แบบอักษรนี้ดีมาก

— shu

5

มีการพิมพ์ผิดขนาดเล็กในภาพด้านบน "display: flex-inline" ควรเป็น "display: inline-flex" คล้ายกับ "inline-block" ฯลฯ

— AlienKevin

62

flexและinline-flexทั้งสองใช้เค้าโครงแบบยืดหยุ่นกับลูกของคอนเทนเนอร์ คอนเทนเนอร์ที่มีdisplay:flexพฤติกรรมเหมือนองค์ประกอบระดับบล็อกเองในขณะที่display:inline-flexทำให้คอนเทนเนอร์นั้นทำงานเหมือนองค์ประกอบอินไลน์

— สิงห์
แหล่งที่มา

29

ความแตกต่างระหว่าง "เฟล็กซ์" และ "อินไลน์เฟล็กซ์"

คำตอบสั้น ๆ :

หนึ่งคือแบบอินไลน์และอื่น ๆ ตอบสนองโดยทั่วไปเช่นองค์ประกอบบล็อก (แต่มีความแตกต่างของตัวเองบางส่วน)

คำตอบอีกต่อไป:

Inline-Flex - เวอร์ชันยืดหยุ่นของอินไลน์ช่วยให้องค์ประกอบและเป็นลูกได้มีคุณสมบัติยืดหยุ่นในขณะที่ยังคงอยู่ในการไหลปกติของเอกสาร / เว็บเพจ โดยทั่วไปคุณสามารถวางคอนเทนเนอร์อินไลน์แบบยืดหยุ่นสองอันในแถวเดียวกันหากความกว้างมีขนาดเล็กพอโดยไม่ต้องใส่สไตล์มากจนเกินไปเพื่อให้พวกมันมีอยู่ในแถวเดียวกัน นี่คล้ายกับ "inline-block"

งอ - คอนเทนเนอร์และลูกนั้นมีคุณสมบัติยืดหยุ่น แต่คอนเทนเนอร์สงวนแถวเนื่องจากมันถูกนำออกจากการไหลปกติของเอกสาร มันตอบสนองเหมือนองค์ประกอบบล็อกในแง่ของการไหลของเอกสาร คอนเทนเนอร์ flexbox สองอันไม่สามารถอยู่ในแถวเดียวกันโดยไม่มีการใส่สไตล์มากเกินไป

ปัญหาที่คุณอาจประสบ

เนื่องจากองค์ประกอบที่คุณระบุไว้ในตัวอย่างของคุณแม้ว่าฉันจะคาดเดา แต่ฉันคิดว่าคุณต้องการใช้เฟล็กซ์เพื่อแสดงองค์ประกอบที่อยู่ในรูปแบบคู่ต่อแถว แต่ยังคงเห็นองค์ประกอบแบบเคียงข้างกัน

เหตุผลที่คุณน่าจะมีปัญหาคือเนื่องจาก flex และ inline-flex มีคุณสมบัติ "ทิศทางทิศทาง" เริ่มต้นที่ตั้งค่าเป็น "แถว" นี้จะแสดงเด็ก ๆ เคียงข้างกัน การเปลี่ยนคุณสมบัตินี้เป็น "คอลัมน์" จะทำให้องค์ประกอบของคุณสามารถสแต็กและสำรองพื้นที่ (ความกว้าง) เท่ากับความกว้างของพาเรนต์

ด้านล่างนี้เป็นตัวอย่างบางส่วนเพื่อแสดงให้เห็นว่า flex vs inline-flex ทำงานอย่างไรและยังแสดงการสาธิตอย่างรวดเร็วว่าองค์ประกอบแบบอินไลน์และบล็อกทำงานอย่างไร ...

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

ซอ

display: flex; flex-direction: row;

ซอ

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

ซอ

display: flex; flex-direction: column;

ซอ

display: inline;

ซอ

display: block

ซอ

นอกจากนี้เอกสารอ้างอิงที่ยอดเยี่ยม: คู่มือฉบับสมบูรณ์เกี่ยวกับเทคนิค Flexbox - css

15

จอแสดงผล: เฟล็กซ์ใช้เลย์เอาต์แบบยืดหยุ่นกับรายการเฟล็กซ์หรือลูกของภาชนะเท่านั้น ดังนั้นตัวคอนเทนเนอร์เองจึงยังคงเป็นองค์ประกอบระดับบล็อกและใช้ความกว้างทั้งหมดของหน้าจอ

สิ่งนี้ทำให้ทุกคอนเทนเนอร์ flex ย้ายไปยังบรรทัดใหม่บนหน้าจอ

จอแสดงผล: อินไลน์เฟล็กซ์ใช้เลย์เอาต์แบบยืดหยุ่นกับรายการเฟล็กซ์หรือลูก ๆ รวมถึงกับคอนเทนเนอร์ เป็นผลให้ภาชนะทำงานเป็นองค์ประกอบแบบอินไลน์เฟล็กซ์เช่นเดียวกับเด็ก ๆ และทำให้ความกว้างขึ้นที่ต้องการโดยรายการ / ลูกของมันเท่านั้นและไม่ใช่ความกว้างทั้งหมดของหน้าจอ

สิ่งนี้ทำให้เกิดคอนเทนเนอร์แบบยืดหยุ่นตั้งแต่สองตู้ขึ้นไปซึ่งแสดงเป็น inline-flex จัดเรียงตัวเองแบบเคียงข้างกันบนหน้าจอจนกว่าจะใช้ความกว้างทั้งหมดของหน้าจอ

— นูร์จาหารมุกแทม
แหล่งที่มา

1

"ใช้รูปแบบที่ยืดหยุ่น [... ] กับตัวคอนเทนเนอร์" [อ้างจำเป็น]

— BoltClock

1

คุณต้องการข้อมูลเพิ่มเติมเพื่อให้เบราว์เซอร์รู้ว่าคุณต้องการอะไร ตัวอย่างเช่นลูกของภาชนะจะต้องมีการบอกว่า "วิธี" ที่จะดิ้น

อัพเดทซอ

ฉันได้เพิ่ม#wrapper > * { flex: 1; margin: auto; }ใน CSS ของคุณแล้วและเปลี่ยนinline-flexเป็นflexและคุณสามารถดูว่าองค์ประกอบเหล่านี้มีพื้นที่เท่ากันในหน้า

— กราฟิก FiSH
แหล่งที่มา

2

ขอบคุณสำหรับคำตอบของคุณ แต่ฉันรู้ว่าฉันจะทำแบบนี้ได้ ฉันเข้าใจผิดจอแสดงผลคุณสมบัติ: inline-flex; - ฉันคิดว่าทรัพย์สินนี้เป็นวิธีที่ง่ายกว่าที่จะบรรลุเป้าหมายของฉัน แต่ในระหว่างวันสุดท้ายที่ฉันได้เรียนรู้ว่าคุณสมบัตินี้เพียงทำให้ภาชนะแสดงแบบอินไลน์ ด้วยพื้นหลังที่เพิ่มตอนนี้ฉันเห็นความแตกต่างระหว่างคุณสมบัติการแสดงผล: อินไลน์เฟล็กซ์ และจอแสดงผล: ดิ้น ที่ flexbox jsfiddle.net/vUSmV/101

— astridx

-1

เปิดแบบเต็มหน้าเพื่อความเข้าใจที่ดีขึ้น

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

ขยายตัวอย่างข้อมูล

— Pawan Gangwani
แหล่งที่มา