屬性值描述
display
flex
定義乙個盒子為彈性盒子
flex-direction
row子盒子水平排列，從左到右
row-reserve
子盒子水平反向排列
column
子盒子垂直排列，從上到下
column-reserve
子盒子垂直反向排列
flex-wrap
no-wrap
子盒子不換行,預設
wrap
子盒子不換行
wrap-reverse
換行並改變順序
justify-content
flex-start
flex子元素在最左邊
flex-end
flex子元素在最右邊
center
flex子元素在正中間
space-between
平分flex容器
space-around
平分flex容器,但是每個子元素兩邊是子元素間距的一半
align-content
flex-start
flex子元素在最上邊
flex-end
flex子元素在最下邊
center
flex子元素在縱向正中間
space-between
縱向平分flex容器
space-around
縱向平分flex容器,但是每個子元素兩邊是子元素間距的一半
stretch
預設：li將ul劃分
align-items
flex-start
flex子元素在最上邊
flex-end
flex子元素在最下邊
center
flex子元素在縱向正中間
baseline
如彈性盒子元素的行內軸與側軸為同一條，則該值與'flex-start'等效。其它情況下，該值將參與基線對齊
stretch
高度100%,寬度自動
align-self
flex-start
flex子元素在最上邊
flex-end
flex子元素在最下邊
center
flex子元素在縱向正中間
baseline
如彈性盒子元素的行內軸與側軸為同一條，則該值與'flex-start'等效。其它情況下，該值將參與基線對齊
stretch
高度100%,寬度自動
order
1(number)
改變順序
flex
1(number)
該元素佔子元素剩餘位置的比例
彈性盒子常用屬性
display設定為flex屬性flex direction屬性 設定子元素的排列方式，同時設定主軸，預設的情況下x軸為主軸flex direction row column row reverse column reverse justify content屬性 設定主軸的排列方式，此屬性作用于父...
彈性盒子常用屬性
新增瀏覽器字首 webkit 也可用postcss自動新增 display webkit flex 如果用了彈性布局，子元素不需要浮動，webkit justify content 子元素水平排列方式方式。center 水平居中 space between 兩端對齊 space around 手拉手...
flex彈性盒子
垂直居中 傳統 絕對定位 flex flexible box 彈性盒子。可以輕鬆控制元素的排列，對齊和順序。宣告定義 使用display flex或display inline flex 宣告乙個容器為彈性盒子。這個容器中的子元素們，會遵循彈性布局。注 一般是使用display flex.inlin...