flex box 彈性布局
main axis; main start; main end; main size;
cross axis; cross start; cross end; cross size
6個容器的屬性
flex-direction
row(預設值) : 主軸為水平方向,起點在左端.
row-reverse : 主軸為水平方向,起點在右端.
column : 主軸為垂直方向,起點在上沿.
column-reverse : 主軸為垂直方向,起點在下沿
flex-wrap
nowrap(預設) :不換行.
wrap :換行,第一行在上方
wrap-reverse :換行,第一行在下方
flex-flow
flex-direction || flex-wrap
justify-content
在主軸上的對齊方式
flex-start (預設值) : 左對齊
flex-end : 右對齊
center : 居中
space-between : 兩端對齊,item之間間隔相等
space-around : item兩側的間隔相等,item與邊框的間隔小
align-items
在交叉軸上對齊方式
flex-start : 交叉軸起點對齊
flex-end : 交叉軸終點對齊
center : 交叉軸中點對齊
stretch(預設值) : 如果item未涉足高度或者設為auto,將佔滿整個容器的高度
baseline : item第一行文字的基線對齊
align-content
屬性定義多根軸線的對齊方式(只有一根軸線時不起作用)
flex-start : 與交叉軸的起點對齊
flex-end : 與交叉軸的終點對齊
center : 與交叉軸的中點對齊
space-between : 與交叉軸兩端對齊,item之間間隔相等
space-around : item兩側的間隔相等,item與邊框的間隔小
stretch(預設值) : 軸線佔滿整個交叉軸
6個item屬性
order
item的排列順序
flex-grow
item的放大比例
flex-shrink
item的縮小比例
flex-basis
專案佔據的主軸空間
flex
flex-grow || flex-shrink || flex basis
align-self
允許單個專案有與其他item不一樣的對齊方式,可覆蓋align-items屬性。預設值auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch
彈性布局FlexBox
css3 彈性盒子 flexible box 或 flexbox 是一種 用於在頁面上布置元素的 布局模式 使得當頁面布局必須適應不同的螢幕尺寸和不同的顯示裝置時，元素可 地執行。對於許多應用程式，彈性盒子模型提供了對塊模型的改進，因為它不使用浮動，flex容器的邊緣也不會與其內容的邊緣摺疊。許多設...
flexbox彈性盒子布局
1.混合劃分 flex 1 flex 1 flex 2 我只有100px 不定寬高，水平垂直居中 2.方法1 可實現螢幕的水平垂直居中 不定寬高的水平垂直居中hhhhhhhhhhhh 方法1方法2 似乎不可實現螢幕的水平垂直居中，只能實現某個容器內的水平垂直居中 容器最好是有寬高 相容性1，ios可...
學習彈性布局flexbox
學習基礎語法，可以根據demo裡面的 理解每乙個屬性和值。css3 彈性框 flexible box 或 flexbox 是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當排布行為的布局方式。包含著彈性專案的父元素。通過設定display屬性的值為flex或inline flex來定義...