flex 彈性 擴充套件 收縮

2021-09-25 09:39:45 字數 265 閱讀 8201

彈性包含了擴充套件和收縮,但是在一些情況下只需要擴充套件或者收縮,我一般習慣性用flex:1,卻遇到了乙個只需要用收縮的需求,查了下flex的其它相關屬性,也試了一遍,總結了一下:

需要具有彈性盒子就設定flex:1,或者包含flex-shrink和flex-grow屬性就能達到彈性盒子效果;

需要具有擴充套件性盒子就設定flex-grow:1,當然比例自己協調;

需要具有收縮性盒子不用說設定flex-shrik就可以了。

簡單,多試試就行,學了不用也不會發現新大陸。

flex 增長與收縮

flex auto 將增長值與收縮值設定為1,基本大小為 auto flex none.將增長值與收縮值設定為0,基本大小為 auto 也就是固定大小。增長 基本大小 額外空間 增長係數 增長係數總和 按比例劃分額外空間,然後各自分配。縮小 基本大小 溢位大小 縮小係數 基本大小 各各縮小係數 自身...

Flex彈性布局

flex是flexible box的縮寫,意為 彈性布局 用來為盒狀模型提供最大的靈活性。任何乙個容器都可以指定為flex布局。box 行內元素也可以使用flex布局。box 注意,設為flex布局以後,子元素的 float clear 和vertical align 屬性將失效。採用flex布局的...

Flex 彈性布局

flex是flexible box 的縮寫,意味 彈性布局 用來為盒裝模型提供最大的靈活性。任何乙個容器都可以指定為flex布局。display flex 行標籤也可以使用flex布局。display inline flex 注意,設為flex布局以後,子元素的float clear和vertica...