就業(yè)班移動(dòng)web第四天
一沦偎、改變主軸方向?yàn)榇怪狈较?/h4>
寫法:flex-direction: column
把主軸方向變成了垂直方向坯认,還是用jc控制主軸方向的對(duì)齊方式
把側(cè)軸方向變成了水平方向,還是用ai控制側(cè)軸方向的對(duì)齊方式
ps:主軸和側(cè)軸僅僅只是調(diào)換了方向而已
二擒滑、彈性盒子換行顯示
寫法 :先設(shè)置彈性容器display: flex;,再設(shè)置flex-wrap: wrap
flexs-warp可設(shè)置換向
flex-wrap: wrap;
flex-wrap: nowrap;
flex-wrap: wrap-reverse;
取值:align-centent:值鸭蛙;
align-content取值與justify-content基本相同
針對(duì)于多行彈性盒子的側(cè)軸設(shè)置的
出現(xiàn)的前提條件,必須要先換行 flex-wrap: wrap筋岛!
align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-around;
align-content: space-between;
align-content: space-evenly;(需要手動(dòng)輸入娶视,沒有提示的)
伸縮比
取值 flex : 值;
取值分類: 數(shù)值(整數(shù))
注意 : 只占用父盒子剩余尺寸