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