Tại sao các mục linh hoạt không thu nhỏ kích thước nội dung trước đây?

356
tomas657 2016-03-28 02:08.

Tôi có 4 cột flexbox và mọi thứ đều hoạt động tốt, nhưng khi tôi thêm một số văn bản vào một cột và đặt nó ở kích thước phông chữ lớn, nó đang làm cho cột rộng hơn bình thường do thuộc tính flex.

Tôi đã cố gắng sử dụng word-break: break-wordvà nó đã hữu ích, nhưng vẫn khi tôi thay đổi kích thước cột thành chiều rộng rất nhỏ, các chữ cái trong văn bản được chia thành nhiều dòng (một chữ cái trên mỗi dòng) và cột không nhận được chiều rộng nhỏ hơn một chữ cái. .

Xem video này (lúc bắt đầu, cột đầu tiên là cột nhỏ nhất, nhưng khi tôi thay đổi kích thước cửa sổ, đó là cột rộng nhất. Tôi chỉ muốn luôn tôn trọng cài đặt flex; kích thước flex 1: 3: 4: 4)

Tôi biết, đặt kích thước phông chữ và phần đệm cột thành nhỏ hơn sẽ hữu ích ... nhưng có giải pháp nào khác không?

Tôi không thể sử dụng overflow-x: hidden.

JSFiddle

.container {
  display: flex;
  width: 100%
}
.col {
  min-height: 200px;
  padding: 30px;
  word-break: break-word
}
.col1 {
  flex: 1;
  background: orange;
  font-size: 80px
}
.col2 {
  flex: 3;
  background: yellow
}
.col3 {
  flex: 4;
  background: skyblue
}
.col4 {
  flex: 4;
  background: red
}
<div class="container">
  <div class="col col1">Lorem ipsum dolor</div>
  <div class="col col2">Lorem ipsum dolor</div>
  <div class="col col3">Lorem ipsum dolor</div>
  <div class="col col4">Lorem ipsum dolor</div>
</div>

2 answers

619
Michael Benjamin 2016-03-28 02:41.

Kích thước tối thiểu tự động của các hạng mục linh hoạt

Bạn đang gặp phải cài đặt mặc định flexbox.

Một mục linh hoạt không được nhỏ hơn kích thước của nội dung của nó dọc theo trục chính.

Các giá trị mặc định là ...

  • min-width: auto
  • min-height: auto

... cho các mục linh hoạt theo hướng hàng và hướng cột, tương ứng.

Bạn có thể ghi đè các mặc định này bằng cách đặt các mục linh hoạt thành:

  • min-width: 0
  • min-height: 0
  • overflow: hidden(hoặc bất kỳ giá trị nào khác, ngoại trừ visible)

Đặc điểm kỹ thuật Flexbox

4.5. Kích thước tối thiểu tự động của các hạng mục linh hoạt

Để cung cấp kích thước tối thiểu mặc định hợp lý hơn cho các mục flex, đặc tả này giới thiệu một autogiá trị mới làm giá trị ban đầu của các thuộc tính min-widthmin-heightđược định nghĩa trong CSS 2.1.

Về autogiá trị ...

Trên một mục flex mà overflowvisibleở trên trục chính, khi quy định trên chính trục hữu min-kích thước mục flex, xác định một kích thước tối thiểu tự động . Nếu không, nó tính đến 0.

Nói cách khác:

  • Giá trị min-width: automin-height: automặc định chỉ áp dụng khi overflowvisible.
  • Nếu overflowgiá trị không phải visiblelà giá trị của thuộc tính kích thước tối thiểu là 0.
  • Do đó, overflow: hiddencó thể thay thế cho min-width: 0min-height: 0.

và ...


Bạn đã áp dụng chiều rộng tối thiểu: 0 và mục vẫn không bị co lại?

Hộp chứa Flex lồng nhau

Nếu bạn đang xử lý các mục linh hoạt trên nhiều cấp của cấu trúc HTML, có thể cần ghi đè các mục mặc định min-width: auto/ min-height: autobật ở các cấp cao hơn.

Về cơ bản, một mục linh hoạt cấp cao hơn min-width: autocó thể ngăn chặn việc co lại các mục được lồng bên dưới với min-width: 0.

Ví dụ:


Ghi chú kết xuất trình duyệt

  • Chrome so với Firefox / Edge

    Kể từ ít nhất là năm 2017, có vẻ như Chrome đang (1) hoàn nguyên về min-width: 0/ min-height: 0mặc định hoặc (2) tự động áp dụng 0mặc định trong một số trường hợp nhất định dựa trên một thuật toán bí ẩn. (Đây có thể là cái mà họ gọi là sự can thiệp .) Do đó, nhiều người thấy bố cục của chúng (đặc biệt là các thanh cuộn mong muốn) hoạt động như mong đợi trong Chrome, nhưng không phải trong Firefox / Edge. Vấn đề này được đề cập chi tiết hơn tại đây: sự khác biệt linh hoạt giữa Firefox và Chrome

  • IE11

    Như đã lưu ý trong thông số kỹ thuật, autogiá trị của thuộc tính min-widthmin-heightlà "mới". Điều này có nghĩa là một số trình duyệt vẫn có thể hiển thị một 0giá trị theo mặc định, vì chúng đã triển khai bố cục flex trước khi giá trị được cập nhật và vì 0là giá trị ban đầu cho min-widthmin-heighttrong CSS 2.1 . Tại sao các mục linh hoạt không thu nhỏ kích thước nội dung trước đây?Các trình duyệt khác đã cập nhật lên autogiá trị mới hơn như được xác định trong thông số kỹ thuật flexbox .


Bản trình diễn sửa đổi

.container {
  display: flex;
}

.col {
  min-height: 200px;
  padding: 30px;
  word-break: break-word
}

.col1 {
  flex: 1;
  background: orange;
  font-size: 80px;
  min-width: 0;   /* NEW */
}

.col2 {
  flex: 3;
  background: yellow
}

.col3 {
  flex: 4;
  background: skyblue
}

.col4 {
  flex: 4;
  background: red
}
<div class="container">
  <div class="col col1">Lorem ipsum dolor</div>
  <div class="col col2">Lorem ipsum dolor</div>
  <div class="col col3">Lorem ipsum dolor</div>
  <div class="col col4">Lorem ipsum dolor</div>
</div>

jsFiddle

2
voracity 2020-08-24 22:40.

Tôi nhận thấy điều này đã khiến tôi nhiều lần đau đầu trong nhiều năm cho cả flex và lưới, vì vậy tôi sẽ đề xuất những điều sau:

* { min-width: 0; min-height: 0; }

và sau đó chỉ cần sử dụng min-width: autohoặc min-height: autonếu bạn cần hành vi đó.

Trên thực tế, hãy thay đổi kích thước hộp để làm cho tất cả bố cục trở nên lành mạnh hơn:

* { box-sizing: border-box; min-width: 0; min-height: 0; }

Có ai biết nếu có bất kỳ hậu quả kỳ lạ? Tôi đã không gặp bất cứ điều gì trong vài năm sử dụng kết hợp những điều trên. Trên thực tế, tôi không thể nghĩ ra bất kỳ trường hợp nào mà tôi muốn bố cục từ nội dung ra ngoài thành flex / lưới, thay vì flex / lưới vào trong nội dung --- và chắc chắn nếu chúng tồn tại, chúng rất hiếm. Vì vậy, điều này giống như một sự mặc định tồi tệ. Nhưng có lẽ tôi đang thiếu một cái gì đó?

Related questions

MORE COOL STUFF

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett đã bất chấp những lời khuyên hẹn hò điển hình khi cô gặp chồng mình.

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Michael Sheen là một diễn viên phi lợi nhuận nhưng chính xác thì điều đó có nghĩa là gì?

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Ngôi sao của Hallmark Colin Egglesfield chia sẻ về những cuộc gặp gỡ với người hâm mộ ly kỳ tại RomaDrama Live! cộng với chương trình INSPIRE của anh ấy tại đại hội.

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Bạn sẽ phải phủi sạch đầu đĩa Blu-ray hoặc DVD để xem tại sao Northern Exposure trở thành một trong những chương trình nổi tiếng nhất của thập niên 90.

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

8 công dụng tuyệt vời của Baking Soda và Giấm

8 công dụng tuyệt vời của Baking Soda và Giấm

Bạn biết đấy, hai sản phẩm này là nguồn điện để làm sạch, riêng chúng. Nhưng cùng với nhau, chúng có một loạt công dụng hoàn toàn khác.

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Thủy điện rất cần thiết cho lưới điện của Hoa Kỳ, nhưng nó chỉ tạo ra năng lượng khi có nước di chuyển. Bao nhiêu nhà máy thủy điện có thể gặp nguy hiểm khi các hồ và sông cạn kiệt?

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Tóc tỉa từ các tiệm và các khoản quyên góp cá nhân có thể được tái sử dụng như những tấm thảm thấm dầu và giúp bảo vệ môi trường.

Tận dụng lợi thế của việc bán hàng nhân Ngày của Cha này

Tận dụng lợi thế của việc bán hàng nhân Ngày của Cha này

Màn hình Samsung Galaxy S9 Plus. Chủ nhật này là Ngày của Cha⁠ — trong trường hợp nó khiến bạn suy nghĩ — và thay vì mua cho anh ấy một chiếc cà vạt trong năm nay, có lẽ đã đến lúc bạn mua cho anh ấy thứ mà anh ấy sẽ thực sự sử dụng.

Assassin's Creed Snuck Into Monster Hunter: World Last Night

Assassin's Creed Snuck Into Monster Hunter: World Last Night

Monster Hunter: World yêu thích các sự kiện chéo. Dù có nghĩa là hóa trang thành Dante của Devil May Cry, giả dạng Horizon: Zero Dawn's Aloy, hay chiến đấu với quái vật Final Fantasy, các nhiệm vụ sự kiện khác nhau của Thế giới được nâng cấp tự do so với các trò chơi khác.

Ava DuVernay Có Quà Tặng Ngày Của Mẹ cho Tất Cả Chúng Ta: Nếp Nhăn Thời Gian Sẽ Được Viết Lại Vào Cuối Tuần Ngày Của Mẹ!

Ava DuVernay Có Quà Tặng Ngày Của Mẹ cho Tất Cả Chúng Ta: Nếp Nhăn Thời Gian Sẽ Được Viết Lại Vào Cuối Tuần Ngày Của Mẹ!

Storm Reid, Oprah Winfrey, Mindy Kaling, Reese Witherspoon và Ava DuVernay tại buổi chiếu đặc biệt của A Wrinkle in Time tại Nhà hát Walter Reade ở Thành phố New York vào ngày 7 tháng 3 năm 2018 “Ava rất mong được nói chuyện với bạn,” một trong những người của Array dư luận viên nói qua điện thoại. (Array là tập thể phân phối, nghệ thuật và vận động chính sách của Ava DuVernay tập trung vào các bộ phim của người da màu và phụ nữ.

Nhiệm vụ bất khả thi 5 sẽ khôi phục niềm tin của bạn trong phim hành động Tentpole

Nhiệm vụ bất khả thi 5 sẽ khôi phục niềm tin của bạn trong phim hành động Tentpole

Mission Impossible: Rogue Nation bắt đầu ở một cấp độ khác. Theo nghĩa đen.

Edwin McCain ra mắt Grand Ole Opry: Quay cảnh hậu trường với nhạc sĩ 'I'll Be'

Edwin McCain ra mắt Grand Ole Opry: Quay cảnh hậu trường với nhạc sĩ 'I'll Be'

McCain, người đang làm việc cho một album mới, lần đầu tiên bước vào vòng kết nối vào tối thứ Sáu ở Nashville

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Rothschild's luggage got lost, but luckily she has an incredible closet to shop: Sister Paris Hilton's!

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa. Từ Hollywood đến New York và mọi nơi ở giữa, hãy xem các ngôi sao yêu thích của bạn đang làm gì!

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

Các nhà điều tra đang xem xét liệu nhóm và nghi phạm có biết nhau trước vụ tấn công hay không

Tôi viết như thế nào

Tôi viết như thế nào

Đối với tôi, mọi thứ là về dòng đầu tiên đó và nó sẽ đưa bạn đến đâu. Một số nhà văn bị điều khiển bởi cốt truyện, sự sắp xếp tinh tế của các quân cờ, trong khi những người khác bị lôi cuốn bởi một nhân vật và khả năng thực hiện một cuộc hành trình với một người bạn hư cấu mới.

Đường băng hạ cánh

Đường băng hạ cánh

Cuối hè đầu thu là mùa hoài niệm. Những chiếc đèn đường chiếu ánh sáng của chúng qua những con đường đẫm mưa, và những chiếc lá dưới chân - màu đỏ cam tắt trong bóng chạng vạng - là lời nhắc nhở về những ngày đã qua.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Vào năm 2021, tôi khuyến khích bạn suy nghĩ lại mọi thứ bạn biết về khách hàng mà bạn phục vụ và những câu chuyện bạn kể cho họ. Lùi lại.

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Vào ngày sinh nhật thứ 9 của Felix The Cat, tôi nhớ về một trong những mất mát lớn nhất trong cuộc đời trưởng thành của tôi - Sophie của tôi vào năm 2013. Tôi đã viết bài luận này và chia sẻ nó trên nền tảng này một thời gian ngắn vào năm 2013.

Language