Sự khác biệt giữa cơ sở flex và chiều rộng là gì?

Đã có những câu hỏi và bài viết về điều này, nhưng không có gì có thể kết luận xa như tôi có thể nói. Tóm tắt tốt nhất tôi có thể tìm thấy là

cơ sở flex cho phép bạn chỉ định kích thước ban đầu / bắt đầu của phần tử, trước khi mọi thứ khác được tính toán. Nó có thể là một tỷ lệ phần trăm hoặc một giá trị tuyệt đối.

... mà bản thân nó không nói nhiều về hành vi của các yếu tố với tập hợp cơ sở flex . Với kiến ​​thức hiện tại về flexbox, tôi không hiểu tại sao điều đó cũng không thể mô tả chiều rộng .

Tôi muốn biết chính xác cơ sở flex khác với chiều rộng trong thực tế như thế nào :

• Nếu tôi thay thế chiều rộng bằng cơ sở flex (và ngược lại), điều gì sẽ thay đổi trực quan?
• Điều gì xảy ra nếu tôi đặt cả hai thành một giá trị khác nhau? Điều gì xảy ra nếu chúng có cùng giá trị?
• Có một số trường hợp đặc biệt khi sử dụng chiều rộng hoặc cơ sở uốn cong sẽ có sự khác biệt đáng kể so với sử dụng cái kia không?
• Làm thế nào để chiều rộng và cơ sở flex khác nhau khi được sử dụng cùng với các kiểu flexbox khác, chẳng hạn như flex-quấn , flex-grow và flex-co lại ?
• Bất kỳ sự khác biệt đáng kể khác?

Chỉnh sửa / làm rõ : Câu hỏi này đã được hỏi theo một định dạng khác trong Tập thuộc tính chính xác dựa trên cơ sở flex nào? nhưng tôi cảm thấy một so sánh hoặc tóm tắt trực tiếp hơn về sự khác biệt của cơ sở flex và chiều rộng (hoặc chiều cao ) sẽ tốt.

Xem xét flex-direction

Điều đầu tiên bạn nghĩ đến khi đọc câu hỏi của bạn là flex-basiskhông phải lúc nào cũng áp dụng width.

Khi flex-directionlà row, flex-basiskiểm soát chiều rộng.

Nhưng khi flex-directioncó column, flex-basiskiểm soát chiều cao.

Sự khác biệt chính

Dưới đây là một số khác biệt quan trọng giữa flex-basisvà width/ height:

• flex-basischỉ áp dụng cho các mục flex. Các thùng chứa Flex (không phải là các mặt hàng flex) sẽ bỏ qua flex-basisnhưng có thể sử dụng widthvà height.

• flex-basischỉ hoạt động trên trục chính. Ví dụ: nếu bạn đang ở flex-direction: column, widthtài sản sẽ cần thiết để định cỡ các mục flex theo chiều ngang.

• flex-basiskhông có tác dụng đối với các mặt hàng flex được định vị tuyệt đối. widthvà heighttài sản sẽ là cần thiết. Các mục flex được định vị tuyệt đối không tham gia vào bố trí flex .

• Bằng việc sử dụng flextài sản, ba bất động sản - flex-grow, flex-shrinkvà flex-basis- có thể được gọn gàng kết hợp thành một tuyên bố. Sử dụng width, cùng một quy tắc sẽ yêu cầu nhiều dòng mã.

Hành vi trình duyệt

Về cách chúng được hiển thị, sẽ không có sự khác biệt giữa flex-basisvà width, trừ khi flex-basislà autohoặc content.

Từ thông số kỹ thuật:

7.2.3. Tài flex-basissản

Đối với tất cả các giá trị khác autovà content, flex-basisđược giải quyết theo cùng một cách như widthtrong chế độ viết ngang.

Nhưng tác động của autohoặc contentcó thể là tối thiểu hoặc không có gì cả. Thêm từ thông số kỹ thuật:

auto

Khi được chỉ định trên một mục flex, autotừ khóa sẽ lấy giá trị của thuộc tính kích thước chính như được sử dụng flex-basis. Nếu giá trị đó là chính nó auto, thì giá trị được sử dụng là content.

content

Biểu thị kích thước tự động, dựa trên nội dung của mục flex.

Lưu ý: Giá trị này không có trong bản phát hành ban đầu của Bố cục hộp linh hoạt và do đó một số triển khai cũ hơn sẽ không hỗ trợ nó. Hiệu quả tương đương có thể đạt được bằng cách sử dụng autocùng với kích thước chính ( widthhoặc height) là auto.

Vì vậy, theo thông số kỹ thuật, flex-basisvà widthgiải quyết giống hệt, trừ khi flex-basislà autohoặc content. Trong các trường hợp như vậy, flex-basiscó thể sử dụng chiều rộng nội dung (có lẽ làwidth tài sản cũng sẽ sử dụng).

Các flex-shrink yếu tố

Điều quan trọng là phải nhớ các cài đặt ban đầu của thùng chứa flex. Một số cài đặt này bao gồm:

• flex-direction: row - Các mục flex sẽ căn chỉnh theo chiều ngang
• justify-content: flex-start - các mục flex sẽ xếp chồng ở đầu dòng trên trục chính
• align-items: stretch - vật phẩm flex sẽ mở rộng để bao phủ kích thước chéo của container
• flex-wrap: nowrap - các mặt hàng flex bị buộc phải ở trong một dòng duy nhất
• flex-shrink: 1 - một vật phẩm flex được phép thu nhỏ

Lưu ý cài đặt cuối cùng.

Bởi vì các mục flex được phép thu nhỏ theo mặc định (điều này ngăn chúng tràn vào vùng chứa), nên chỉ định flex-basis/width / heightcó thể bị ghi đè.

Ví dụ, flex-basis: 100pxhoặcwidth: 100px , cùng với flex-shrink: 1, sẽ không nhất thiết phải là 100px.

Để hiển thị chiều rộng được chỉ định - và giữ cố định - bạn sẽ cần phải tắt thu hẹp:

div {
   width: 100px;
   flex-shrink: 0;
}  

HOẶC LÀ

div {
  flex-basis: 100px;
  flex-shrink: 0;
}

HOẶC, theo khuyến nghị của thông số kỹ thuật:

flex: 0 0 100px;    /* don't grow, don't shrink, stay fixed at 100px */

7.2. Các thành phần của tính linh hoạt

Các tác giả được khuyến khích kiểm soát tính linh hoạt bằng cách sử dụng tốc flexký thay vì trực tiếp với các thuộc tính của nó, vì tốc ký sẽ đặt lại chính xác bất kỳ thành phần không xác định nào để phù hợp với việc sử dụng chung .

Lỗi trình duyệt

Một số trình duyệt gặp khó khăn khi định cỡ các mục flex trong các thùng chứa flex lồng nhau.

flex-basis bỏ qua trong một container flex lồng nhau. widthlàm.

Khi sử dụng flex-basis, container bỏ qua kích thước của trẻ em và trẻ em tràn vào container. Nhưng với widthtài sản, container tôn trọng kích thước của con cái và mở rộng tương ứng.

Người giới thiệu:

• Chrome không mở rộng cha mẹ flex theo nội dung của trẻ em
• Mục flex tràn ra khi sử dụng cơ sở flex
• Sự khác biệt giữa chiều rộng và cơ sở flex
• Cơ sở flex đang bị bỏ qua khi định cỡ các thùng chứa flex lồng nhau.
• flex-cơ sở: 100px làm một cái gì đó khác với chiều rộng: 100px + flex-cơ sở: tự động

Ví dụ:

• https://jsfiddle.net/t419zhra/ (nguồn: @Dremora )
• https://codepen.io/anon/pen/NVxaoy (nguồn @Daniel )
• https://jsfiddle.net/voc9grx6/ (nguồn: Lỗi Chromium )
• https://jsfiddle.net/qjpat9zk/ (nguồn: Lỗi Chromium )

vật phẩm flex sử dụng flex-basisvà white-space: nowraptràn inline-flexcontainer. widthlàm.

Có vẻ như một hộp chứa flex được đặt inline-flexkhông nhận ra flex-basisở trẻ khi kết xuất anh chị em vớiwhite-space: nowrap (mặc dù nó chỉ có thể là một vật phẩm có chiều rộng không xác định). Các container không mở rộng để chứa các mặt hàng.

Nhưng khi widthtài sản được sử dụng thay vìflex-basis , container tôn trọng kích thước của con cái và mở rộng tương ứng. Đây không phải là vấn đề trong IE11 và Edge.

Người giới thiệu:

• chiều rộng container flex không tăng trưởng
• Inline flex container (display: inline-flex) đang mở rộng toàn bộ chiều rộng của container cha

Thí dụ:

• https://jsfiddle.net/p18h0jxt/1/ (từ bài đăng đầu tiên ở trên)

flex-basis(và flex-grow) không hoạt động trên phần tử bảng

Người giới thiệu:

• Tại sao flex-box hoạt động với div, nhưng không phải là bảng?
• Tại sao không flex-grow: 1 công việc cho một bảng trong Safari? (và cạnh)

flex-basisthất bại trong Chrome và Firefox khi thùng chứa ông bà là một yếu tố thu nhỏ để phù hợp. Thiết lập hoạt động tốt trong Edge.

• Container được định vị tuyệt đối không mở rộng chiều rộng để phù hợp với nội dung flexbox

Giống như trong ví dụ được trình bày trong liên kết ở trên, liên quan đến position: absoluteviệc sử dụng floatvà inline-block, cũng sẽ hiển thị cùng một đầu ra không hoàn hảo ( bản demo jsfiddle ).

Lỗi ảnh hưởng đến IE 10 và 11:

• flexkhai báo tốc ký với flex-basiscác giá trị đơn vị được bỏ qua
• flex-basis không tài khoản cho box-sizing: border-box
• flex-basis không hỗ trợ calc()
• Tầm quan trọng bị bỏ qua flex-basiskhi sử dụng tốc flexký

Ngoài bản tóm tắt tuyệt vời của Michael_B, đáng để nhắc lại điều này:

cơ sở flex cho phép bạn chỉ định kích thước ban đầu / bắt đầu của phần tử, trước khi mọi thứ khác được tính toán. Nó có thể là một tỷ lệ phần trăm hoặc một giá trị tuyệt đối.

Phần quan trọng ở đây là ban đầu .

Chính nó, điều này giải quyết theo chiều rộng / chiều cao cho đến khi các thuộc tính tăng / giảm flex khác phát huy tác dụng.

Vì thế. một đứa trẻ với

.child {
 flex-basis:25%;
 flex-grow:1;
}

sẽ rộng 25% ban đầu nhưng sau đó ngay lập tức mở rộng hết mức có thể cho đến khi các yếu tố khác được bao gồm. Nếu không có gì..tôi sẽ rộng 100% / cao.

Một bản demo nhanh:

.flex {
  width: 80%;
  margin: 1em auto;
  height: 25px;
  display: flex;
  background: rebeccapurple;
}
.child {
  flex-basis: auto;
  /* default */
  background: plum;
}
.value {
  flex-basis: 25%;
}
.grow {
  flex-grow: 1;
}

<div class="flex">
  <div class="child auto">Some Content</div>
</div>
<div class="flex">
  <div class="child value">Some Content</div>
</div>
<div class="flex">
  <div class="child grow">Some Content</div>
</div>

Thử nghiệm với flex-grow, flex-shrinkvà flex-basis (hoặc tốc ký flex :fg fs fb) ... có thể dẫn đến một số kết quả thú vị.

Có thể là điểm quan trọng nhất để thêm:

Nếu trình duyệt không hỗ trợ flexthì sao? Trong trường hợp như vậy,width/height tiếp quản và áp dụng các giá trị của họ.

Đó là một ý tưởng rất tốt - gần như thiết yếu - để xác định width/heightcác yếu tố, ngay cả khi bạn có một giá trị hoàn toàn khác flex-basis. Hãy nhớ kiểm tra bằng cách vô hiệu hóa display:flexvà xem những gì bạn nhận được.