1.flex direction :row/row-reverse/column/column-reverse
2.flex属性
flex元素不具有包裹性! 和块级元素类似 span元素flex后也会默认占一行
flex中伪元素也会加入flex元素 内部定位元素absolute fixed独立于静态元素也会受影响,之后再按left,top的值定位(定位元素即使zindex一样也不再同一层,zindex一样的后面的在上面,relative即使不一样也在同一层), float,clear,vertical-align会被忽略
overflow hidden也会影响定位元素
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%是代表父元素的百分比
分配空间 有多的或者少的空间(总空间-元素总basis占据空间)再根据各元素的grow或者shrink值相加 根据各元素占百分比计算 分配空间
3,align-items和align-content
items指单行元素在自己所在行的对其方式 一般在垂直居中使用
content指多行其在副轴上的对其方式
align-items默认为strech所以默认拉伸
space-evenly(等分空白区域)和space-around(每个元素等分空间,中间间距为二边的二倍)的区别
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