4?? Flexbox ?? ?? ?? ?? ? ????? ?? ?? ???? ???? ? ?? ??? ???? Flex ???? ?? ?? ???? ?????.
word-break:break-word
? ??? ???? ??? ???? ? ??? ?? ?? ??? ???? ???? ??? ?? ?? ????(? ?? ? ??) ? ??? ?? 1?? ???? ????. ??? ??.
? ??? ?? (???? ? ?? ?? ?? ??? ? ??? ???? ?? ?? ?? ???. ?? Flex ??? ???? ????. Flex ??? 1:3:4:4)
?? ????. ?? ??? ? ??? ? ?? ???? ??? ? ????...??? ?? ?? ??? ????
??? ? ???? overflow-x:hidden
.
JSFiddle
Flex? ???? ?? ?? ?? ??? ??? ?? ?? ??? ?????.
?????? ?? ? ??? ???? min-width: auto
或 min-height: auto
? ?????.
??? ?? ??? ???? ?? ????? ?? ????? ?? ?? ????.
??????? ??? ????? ?? ?? ???? ?? ??? ???? ???? ? ? ?? ??? ??? ?????. ?? Flex/Grid?? ??? ???? ?????? ?? ????? ????? Flex/Grid? ??????? ??? ?? ??? ? ????. ?? ????? ?? ??? ????. . ??? ??? ?? ????? ?????. ??? ?? ??? ??? ?? ? ?????
Flexbox ?? ??? ?????.
Flex ??? ??? ?? ??? ???? ?? ? ????.
????...
最小寬度:自動
最小高度:自動
...? ? ? ?? ??? ?? ??? ?????.
Flex ??? ???? ???? ??? ???? ??? ? ????.
最小寬度:0
最小高度:0
溢出:隱藏
(或任何其他值,可見
??)auto
? ??...
?,
min-width: auto
和 min-height: auto
默認(rèn)值僅在overflow
可見
.overflow
值不可見
,則min-size屬性的值為0
. overflow: hide
可以替代 min-width: 0
和 min-height: 0
. ??...
min-height: auto
? ?? ????. ??? Flex ????
HTML ??? ?? ???? Flex ????? ???? ?? ?? ?? ?????? ??? min-width: auto
/ min-height: auto code>? ???? ? ????.
????? min-width: auto
的更高級別的 Flex 項目可以防止使用 min-width: 0
? ???? ? ?? ??? Flex ?????
?: ? ??? ??? ? ????.
Chrome? Firefox/Edge
????? 2017??? Chrome? (1) min-width: 0
/ min-height: 0
默認(rèn)值,或者 ( 2) 基于神秘算法在某些情況下自動應(yīng)用 0
????? ????? ? ????. (??? ??? intervention??? ??? ?? ????.) ????? ?? ???? ????(?? ?? ??? ??)? Chrome??? ???? ????? Firefox/Edge??? ???? ?? ?? ?? ????. ? ??? ???? ? ??? ????. Firefox? Chrome? flex-shrink ???
IE11
??? ??? ?? min-width
? min-height
??? auto
?? "new"???. ?? ?? ????? ?? ?????? ?? Flex ????? ???? 0
? ?? ?? ? ??0
?? ?? ???? ? ??? ?????. rel=" -width ? min-heightnoreferrer"> CSS 2.1
min-width
和 min-height
屬性的 auto
值為“新”。這意味著某些瀏覽器默認(rèn)情況下仍可能呈現(xiàn) 0
值,因為它們在更新該值之前實現(xiàn)了 Flex 布局,并且 0
是 min 的初始值CSS 2.1。 IE11 就是這樣的瀏覽器。 其他瀏覽器已更新到較新的
flexbox 規(guī)范中定義的 auto
. IE11? ?? ?? ???????.
flexbox auto ??
.