flex布局中對其子項的width百思而不得其姐, 翻閱資料, 略作個解,不正之處,還望指明.

一.basis尺寸的確定

????1. 0%?

????????基礎尺寸為0

????2.auto

????????若width值為auto,basis為auto, 則最大內容寬度為基礎尺寸

????3.設置固定的值

????????若basis和width同時設置了具體數(shù)值,則使用basis值為基礎尺寸

二.最小尺寸的確定

????由min-width, 最小內容寬度, width決定

????由min-width時,min-width為最小值

????無min-width時,比較width和最小內容寬度較小者為最小尺寸

????無min-width時, width為auto,則最小尺寸為最小內容寬度?

? ? 若flex-item設置了overflow:hidden,且最小尺寸是由最小內容寬度決定的,那么最小尺寸限制無效

三.最終尺寸

????由基礎尺寸,最小尺寸,彈性拉升和收縮決定

? ? 拋去彈性拉升和收縮下,由基礎尺寸和最小尺寸決定,如果基礎尺寸小于最小尺寸,則會拉升至最小尺寸,若最小尺寸小于基礎尺寸,則用基礎尺寸.

圖解:

????

1. flex : 0 1 auto

? ? ? ? 2.flex: 0 1 0%

???????

? ? 舉一反三,數(shù)值可以有很多變形,熟悉以上規(guī)則就能合理的解釋為什么寬度是那么寬,grow與shrink自不必談,在基礎上拉升壓縮寬度.

????另一個flex-item中省略號的問題:

????