flex布局总结

针对容器的属性

flex布局属性。声明一下布局是flex布局。

display:flex；

声明一下flex布局的方向（默认是水平。）

flex-direction:row；

设置里面的内容如果一行放不下。是否自动换行

flex-wrap:wrap //换行

flex-wrap:nowrap //不换行

flex-wrap:wrap-reverse //换行，第一行内容在最下面。

flex-flow是flex-direction和flex-wrap的简写形式。第一个值是方向的意思，第二个值是内容是否换行的属性

flex-flow: row wrap;

justify-content:flex-start;属性定义了项目在主轴上的对齐方式 (类似gravity=center_方向) 主轴的意思就是方向是水平的还是垂直的。

space-between是每个item中间的距离一样。

justify-content : flex-start | flex-end | center | space-between | space-around ;

align-items属性定义项目在交叉轴上如何对齐。

align-items : flex-start | flex-end | center | baseline | stretch ;

stretch都拉伸。铺满。

align-content：垂直方向的位置。这个对多行的起作用，对一行的不起作用，一行用align-iteims

针对 item的样式设置。

设置里面的内容是否自动缩放，平分大小

flex-shrink:1 里面的内容自动平分大小，允许缩小

flex-shirnk:0 里面的内容不自动平分大小，不允许缩小。本身设置多大就是多大。如果放不下就其余的就在屏幕外面不显示

flex-grow :1 是否允许增大1是允许 0是不允许

flex-basis: 90%; 这个是设置此item占用整个的百分比。如果是水平，那就是占水平百分比。如果是垂直，那就是占用垂直方向的百分比。

align-self: align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。默认值为 auto ，

align-self表示自己位于父布局的那个位置

<text class="basicView basicView">3</text>

这种写法。class后面两个内容。那就是给text设置2个样式

flex布局总结图：