C3 彈性盒子2

2021-10-25 04:17:27 字數 903 閱讀 8039

align-self:用於設定彈性元素自身在側軸(縱軸)方向上的對齊方式。

align-self屬性取值

auto

如果'align-self'的值為'auto',則其計算值為元素的父元素的'align-items'值,如果其沒有父元素,則計算值為'stretch'。

flex-start

彈性盒子元素的側軸(縱軸)起始位置的邊界緊靠住該行的側軸起始邊界。

flex-end

彈性盒子元素的側軸(縱軸)起始位置的邊界緊靠住該行的側軸結束邊界。

center

彈性盒子元素在該行的側軸(縱軸)上居中放置。(如果該行的尺寸小於彈性盒子元素的尺寸,則會向兩個方向溢位相同的長度)。

baseline

如彈性盒子元素的行內軸與側軸為同一條,則該值與'flex-start'等效。其它情況下,該值將參與基線對齊。

stretch

如果指定側軸大小的屬性值為'auto',則其值會使專案的邊距盒的尺寸盡可能接近所在行的尺寸,但同時會遵照'min/max-width/height'屬性的限制。

flex:屬性用於指定彈性子元素如何分配空間。

flex屬性取值

auto

計算值為 1 1 auto

initial

計算值為 0 1 auto

none

計算值為 0 0 auto

inherit

從父元素繼承

[ flex-grow ]

定義彈性盒子元素的擴充套件比率。

[ flex-shrink ]

定義彈性盒子元素的收縮比率。

[ flex-basis ]

定義彈性盒子元素的預設基準值。

c3中的彈性盒子

c3中的彈性盒子 一 display box display box flex display flex都是彈性盒子模型的父元素屬性,只不過前兩個是以前的老屬性,瀏覽器在更新,規範也在更新,老屬性也就被留了下來,現在主要使用第三種樣式。首先要在父元素中設定display flex 這個屬性。我現在的...

C3 彈性盒子的基本屬性

設定在父元素上的值 屬性 描述flex direction 設定或檢索伸縮盒物件的子元素在父容器中的位置。預設row flex wrap 設定或檢索伸縮盒物件的子元素超出父容器時是否換行。預設nowrap flex flow 復合屬性。設定或檢索伸縮盒物件的子元素排列方式。align items 設...

css3 彈性盒子

display webkit flex 定義元素為彈性盒子 屬性 direction 方向 flex direction row 預設值,子元素正向1 2 3 布局 flex direction row reverse 子元素正向3 2 1 布局 flex direction column 縱向布局...