就业班移动web第四天
一、改变主轴方向为垂直方向
写法:flex-direction: column
把主轴方向变成了垂直方向,还是用jc控制主轴方向的对齐方式
把侧轴方向变成了水平方向,还是用ai控制侧轴方向的对齐方式
ps:主轴和侧轴仅仅只是调换了方向而已
二、弹性盒子换行显示
写法 :先设置弹性容器display: flex;,再设置flex-wrap: wrap
flexs-warp可设置换向
flex-wrap: wrap;
flex-wrap: nowrap;
flex-wrap: wrap-reverse;
取值:align-centent:值;
align-content取值与justify-content基本相同
针对于多行弹性盒子的侧轴设置的
出现的前提条件,必须要先换行 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;(需要手动输入,没有提示的)
伸缩比
取值 flex : 值;
取值分类: 数值(整数)
注意 : 只占用父盒子剩余尺寸