css3彈性盒子,是一種當頁面需要適應不同的螢幕大小以及裝置時,確保元素擁有恰當的行為布局,引入彈性盒布局模型的目的是提供一種更加有效的方式來對乙個容器中的子元素進行排列,對齊和分配空白空間.
屬性1 flex-direction 屬性指定了彈性子元素在父容器中的位置;
row 橫向從左到右排列(左對齊)預設的排序方式
row-reverse 反轉橫向排序右對齊,從後往前排,最後一項排在最前面;
column 縱向排列
column-reverse 反轉縱向排列
flex-start:彈性專案向行頭緊挨著填充;
flex-end:彈性專案向行尾緊挨著填充.
center:彈性專案居中緊挨著填充
space-around:彈性專案平均分布在該行上,兩邊留有一半的間隔空間;
flex-start:彈性盒子在側軸(縱軸)起始位置的邊界緊靠該行的側軸起始邊界;
flex-end:在該行側軸結束邊界;
center:彈性盒子在該行的側軸居中位置
baseline:如彈性盒子元素的行內軸與側軸為同一條,則該值與"flex-start"有效
4:flex-warp 屬性用於指定盒子的子元素換行方式
nowrap:預設彈性容器為單行;
wrap:彈性容器為多行;
wrap-reserve:反轉
wrap:排列
stretch:魔人各行將會伸展以及占用剩餘空間
flex-start:各行彈性盒容器的起始位置堆疊;
flex-end:各行彈性盒容器的結束位置堆疊;
center:中間位置堆疊;
space-between:各行彈性盒中間平均分布;
7:align-self 屬性用於設定彈性元素自身在側軸方向上的對齊方式;
auto:如果align-self的值為:"auto",則計算值為元素的父元素的"align-items"值,如果沒有父元素,則計算的值為"stretch"
; flex-start:彈性盒子元素的側軸(縱軸)起起始位置的邊界緊靠往該行側軸起始邊界;
flex-end:結束邊界;
center:彈性盒子元素在側軸(縱軸)上居中位置;
baseline:行內軸與側軸為同條,則該值與'flex-start'有效;
stretch:(同"align-items"
);
css3 彈性盒子
display webkit flex 定義元素為彈性盒子 屬性 direction 方向 flex direction row 預設值,子元素正向1 2 3 布局 flex direction row reverse 子元素正向3 2 1 布局 flex direction column 縱向布局...
Css3 彈性盒子
彈性盒子是 css3 的一種新的布局模式。css3 彈性盒 flexible box 或 flexbox 是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的布局方式。引入彈性盒布局模型的目的是提供一種更加有效的方式來對乙個容器中的子元素進行排列 對齊和分配空白空間。彈性盒子由彈...
Css3彈性盒子
css3彈性盒子 fiexbox 1.彈性盒子 隨螢幕放大縮小盒子也放大縮小，不出現滾動條。對容器中的子元素進行排列 對齊和分配。2.彈性盒子 彈性容器 彈性子元素 注 彈性盒子在父元素寫，只定義子元素的布局。乙個彈性容器包含乙個或多個彈性子元素。預設情況每個容器只有一行，彈性子元素在彈性盒子內一行...