flex盒模型整理

2022-06-25 19:06:09 字數 596 閱讀 6012

1.彈性盒子真神奇,專案寬度(指x軸為主軸時的寬度,是y軸為主軸時的高度)大於父盒子也溢不出

x軸為主軸時

了解:y軸為主軸時(y軸為主軸可以看成x軸為主軸的旋轉)

寬度(指x軸為主軸時的寬度,y軸為主軸時的高度)大於父盒不溢位,取父盒寬度:因為專案的flex-shrink預設值為1,所以當專案寬度大於父盒子寬度時,所有專案寬度會等比例(1:1:1)縮小,總寬度等於父盒子寬度;

當然如果某個專案的為0或為2,那麼就不縮小以及承擔兩份比例的縮小。總之就是flex-shrink為0的專案不承擔縮小,flex-shrink為及就承擔相對比例的縮小。

2.父盒子的高度未指定時,專案高度不會溢位;父盒子指定高度後,專案高度大於父盒子高度就會溢位。

Flex伸縮盒模型

1.伸縮容器屬性 1.1設定伸縮容器 設定元素為伸縮容器 display flex 設定元素為內聯級伸縮容器 display inline flex。下面的元素會上來。1.2主軸方向 flex direction屬性決定主軸的方向 即專案的排列方向 flex direction row row 預設...

Flex彈性盒模型

flex direction用來控制子項整體布局方向,是從左往右還是從右往左,是從上往下還是從下往上。flex direction row 布局的排列方向 主軸排列方向 row 預設值,顯示為行。方向為當前文件水平流方向,預設情況下是從左往右。row reverse 顯示為行。但方向和row屬性值是...

彈性盒模型,flex布局

彈性盒子是css3的一種新布局模式,由容器 父元素 和專案 子元素 組成。彈性盒子是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的布局方式。引入彈性盒模型的目的 提供一種更加有效的方式來對乙個容器中的子元素進行排列 對齊和分配空白區間。設定彈性盒子 display flex或...