Sự khác biệt giữa hiển thị: inline-flex và display: flex là gì?

330

Tôi đang cố gắng sắp xếp theo chiều dọc các phần tử trong một trình bao bọc ID. Tôi đã đưa tài sản display:inline-flex;cho ID này vì trình bao bọc ID là thùng chứa flex.

Nhưng không có sự khác biệt trong cách trình bày. Tôi hy vọng rằng mọi thứ trong ID trình bao bọc sẽ được hiển thị inline. Tại sao không phải là 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>
Mở rộng đoạn trích

css  flexbox 
— chiêm tinh
nguồn

Câu trả lời:

407

display: inline-flexkhông làm cho các mục flex hiển thị nội tuyến. Nó làm cho container flex hiển thị nội tuyến. Đó là sự khác biệt duy nhất giữa display: inline-flexvà display: flex. Một so sánh tương tự có thể được thực hiện giữa display: inline-blockvà display: block, và hầu như bất kỳ loại hiển thị nào khác có đối tác nội tuyến . 1

Hoàn toàn không có sự khác biệt về hiệu ứng trên các vật phẩm flex; bố trí flex là giống hệt nhau cho dù container flex là cấp độ khối hoặc cấp độ nội tuyến. Cụ thể, bản thân các mục flex luôn hoạt động giống như các hộp cấp khối (mặc dù chúng có một số thuộc tính của khối nội tuyến). Bạn không thể hiển thị các mục flex nội tuyến; nếu không thì bạn không thực sự có bố cục flex.

Không rõ chính xác ý của bạn là gì khi "căn chỉnh theo chiều dọc" hoặc tại sao chính xác bạn muốn hiển thị nội dung nội tuyến, nhưng tôi nghi ngờ rằng flexbox không phải là công cụ phù hợp cho bất cứ điều gì bạn đang cố gắng thực hiện. Cơ hội là những gì bạn đang tìm kiếm chỉ là bố cục nội tuyến cũ ( display: inlinevà / hoặc display: inline-block), mà flexbox không phải là một thay thế; flexbox không phải là giải pháp bố cục phổ quát mà mọi người tuyên bố đó là (tôi nói rõ điều này bởi vì quan niệm sai lầm có lẽ là lý do tại sao bạn đang xem xét flexbox ở nơi đầu tiên).

1 Sự khác biệt giữa bố cục khối và bố cục nội tuyến nằm ngoài phạm vi của câu hỏi này, nhưng vấn đề nổi bật nhất là chiều rộng tự động: các hộp cấp khối kéo dài theo chiều ngang để lấp đầy khối chứa của chúng, trong khi các hộp cấp độ co lại để phù hợp với chúng nội dung. Trong thực tế, chỉ vì lý do này mà bạn sẽ gần như không bao giờ sử dụng display: inline-flextrừ khi bạn có một lý do rất chính đáng để hiển thị nội tuyến flex container của bạn.

— BoltClock
nguồn
14
Bản demo fiddle nâng cao để phân biệt inline-flexvà flex: jsfiddle.net/mgr0en3q/1 Fiddle gốc bởi @ fish-Graphics và @astridx
— Kevin Law
Câu trả lời hoàn toàn hữu ích. Tôi đã bối rối ngay lần đầu tiên. Khi tôi áp dụng flex flex, mục flex không thay đổi khi tôi áp dụng với flex flex. Trên thực tế, nó được áp dụng tại flex container :)
— Faris Rayhan
67

OK, tôi biết lúc đầu có thể hơi khó hiểu, nhưng displayđang nói về phần tử cha, có nghĩa là khi chúng ta nói : display: flex;, đó là về phần tử và khi chúng ta nói display:inline-flex;, cũng tự tạo ra phần tử inline...

Giống như tạo một div nội tuyến hoặc khối , chạy đoạn trích bên dưới và bạn có thể thấy cách display flexchia nhỏ sang dòng tiếp theo:

.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>
Mở rộng đoạn trích

Cũng nhanh chóng tạo hình ảnh bên dưới để hiển thị sự khác biệt trong nháy mắt:

hiển thị flex so với hiển thị nội tuyến-flex

— Alireza
nguồn
3
Bạn đang sử dụng cái gì cho bức tranh này? Phông chữ này rất đẹp.
— shu
5
Có một lỗi đánh máy nhỏ trên hình ảnh trên. "display: flex-inline" phải là "display: inline-flex" tương tự như "inline-block", v.v.
— AlienKevin
62

flexvà inline-flexcả hai áp dụng bố trí flex cho trẻ em của container. Container có display:flexhành vi giống như một phần tử cấp khối, trong khi display:inline-flexlàm cho container hoạt động như một phần tử nội tuyến.

— Sư Tử
nguồn
29

Sự khác biệt giữa "flex" và "inline-flex"

Câu trả lời ngắn:

Một là nội tuyến và cơ bản khác đáp ứng như một phần tử khối (nhưng có một số khác biệt riêng của nó).

Câu trả lời dài hơn:

Inline-Flex - Phiên bản nội tuyến của flex cho phép phần tử và phần tử con có các thuộc tính flex trong khi vẫn duy trì trong luồng thông thường của tài liệu / trang web. Về cơ bản, bạn có thể đặt hai thùng chứa flex nội tuyến trong cùng một hàng, nếu chiều rộng đủ nhỏ, không có bất kỳ kiểu dáng thừa nào để cho phép chúng tồn tại trong cùng một hàng. Điều này khá giống với "khối nội tuyến".

Flex - Container và nó là các thuộc tính flex nhưng container chứa hàng, vì nó được lấy ra khỏi luồng thông thường của tài liệu. Nó đáp ứng như một phần tử khối, về mặt luồng tài liệu. Hai thùng chứa flexbox không thể tồn tại trên cùng một hàng mà không có kiểu dáng thừa.

Vấn đề bạn có thể gặp phải

Do các yếu tố bạn đã liệt kê trong ví dụ của mình, mặc dù tôi đoán, tôi nghĩ rằng bạn muốn sử dụng flex để hiển thị các yếu tố được liệt kê theo kiểu hàng ngang nhưng tiếp tục nhìn thấy các yếu tố cạnh nhau.

Lý do bạn có thể gặp sự cố là do flex và inline-flex có thuộc tính "flex-direction" mặc định được đặt thành "hàng". Điều này sẽ hiển thị trẻ em cạnh nhau. Thay đổi thuộc tính này thành "cột" sẽ cho phép các thành phần của bạn xếp chồng và không gian dự trữ (chiều rộng) bằng với chiều rộng của cha mẹ của nó.

Dưới đây là một số ví dụ để cho thấy cách thức hoạt động của flex vs inline-flex và cũng là bản demo nhanh về cách các phần tử nội tuyến và khối hoạt động ...

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

Vĩ cầm

display: flex; flex-direction: row;

Vĩ cầm

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

Vĩ cầm

display: flex; flex-direction: column;

Vĩ cầm

display: inline;

Vĩ cầm

display: block

Vĩ cầm

Ngoài ra, một tài liệu tham khảo tuyệt vời: Hướng dẫn đầy đủ về Flexbox - thủ thuật css

15

Hiển thị: flex chỉ áp dụng bố trí flex cho các mục flex hoặc con của container. Vì vậy, bản thân container chứa một phần tử mức khối và do đó chiếm toàn bộ chiều rộng của màn hình.

Điều này khiến mọi container flex chuyển sang một dòng mới trên màn hình.

Hiển thị: inline-flex áp dụng bố trí flex cho các mục flex hoặc trẻ em cũng như cho chính container. Kết quả là, container hoạt động như một phần tử flex nội tuyến giống như trẻ em làm và do đó chỉ chiếm chiều rộng theo yêu cầu của các vật phẩm / con của nó chứ không phải toàn bộ chiều rộng của màn hình.

Điều này gây ra hai hoặc nhiều thùng chứa flex lần lượt, được hiển thị dưới dạng flex-inline, căn chỉnh chúng cạnh nhau trên màn hình cho đến khi toàn bộ chiều rộng của màn hình được chụp.

— Noor Jahan Mukammel
nguồn
1
"áp dụng bố trí flex [...] cho chính container" [cần dẫn nguồn]
— BoltClock
1

Bạn cần thêm một chút thông tin để trình duyệt biết bạn muốn gì. Ví dụ, con của container cần được nói "cách" để uốn.

Cập nhật Fiddle

Tôi đã thêm vào #wrapper > * { flex: 1; margin: auto; }CSS của bạn và thay đổi inline-flexthành flex, và bạn có thể thấy các phần tử hiện không gian như thế nào trên trang.

— HÌNH ẢNH FiSH
nguồn
2
Cảm ơn câu trả lời của bạn, nhưng tôi biết rằng tôi có thể làm theo cách này. Tôi chỉ hiểu nhầm hiển thị thuộc tính: inline-flex; - Tôi nghĩ rằng tài sản này là một cách dễ dàng hơn để thực hiện mục tiêu của tôi. Nhưng ở giữa những ngày cuối cùng tôi đã biết rằng tài sản này chỉ làm cho container hiển thị nội tuyến. Với một nền tảng được thêm vào bây giờ tôi thấy sự khác biệt giữa màn hình thuộc tính: inline-flex; và hiển thị: flex; tại một hộp linh hoạt. jsfiddle.net/vUSmV/101
— Astridx
-1

Mở trong trang đầy đủ để hiểu rõ hơn

.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>
Mở rộng đoạn trích

— Pawan Gangwani
nguồn
— Pawan Gangwani
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.