flex布局
1.flex direction :row/row-reverse/column/column-reverse
2.flex属性
flex:flex-grow,flex-shrink,flex-basis;
initial 默认 0 1 auto;
flex:1 1 1 0%; 一般用来自适应
flex;none 0 0 auto;
flex:auto 1 1 auto
flex:10% 1 1 10%
一般flex会根据basis计算后 auto代表自己设置的宽高,10%是代表父元素的百分比
分配空间 有多的或者少的空间再根据各元素的grow或者shrink值相加 根据各元素占百分比计算 分配空间
3,align-items和align-content
items指单行元素在自己所在行的对其方式 一般在垂直居中使用
content指多行其在副轴上的对其方式
align-items默认为strech所以默认拉伸
4.flex-direction row column row-reverser
flex- wrap nowrap wrap-reverse wrap
order 指定顺序
补充 flex父元素本身不具有包裹性(子元素有)
inlineflex可以包裹
这里有一个问题 当 flex column wrap时 宽度只能包裹住一列
解决办法 给父元素设置 为row writingmode vertical-lr 子元素writing-mode lr