Flex布局：

Flex布局：

Display:flex;

定义方向：flex-direction:row(默认 以X轴)row-reverse (以X轴但方向相反)column(以Y轴)column-reverse（以Y轴但方向相反）

父元素写display:flex;作用给子元素

 

Justify-conten:这里有6个排列方式作用给主轴分别是：

flex-start (默认 X轴顺序排)

center(以中间排列 注：元素第一个的左边和最后一个右边间隙相等 其他位置紧靠一起)

flex-end (默认 X轴反向相反顺序排 元素初始在之前位置的对立面)

space-between (左右两边子元素仅靠父元素两边 其他元素以左右两边相同间隔排列)

space-around (子元素以左右两边的间隔相等排列)

space-evenly (子元素左右两边间隔一样与space-around相比右边少了一半 最外子元素除外)

align-items:stretch,flex-start,flex-end,center 这些是侧轴排列方式

默认stretch特点是元素不写高度(height)会自适应父元素高度 flex-start,flex-end,center这些会让没写高度的父元素变得和内容一样大。

flex-warp: warp ,warp-reverse 这些是换行分别是向下和向上换行

注： 没写这个子元素不会换行 子元素会自适应宽度当子元素高度和内容一样时会溢出

如果有多行是可以用align-conten:;和主轴的justify-conten:;差不多

这些是作用与子元素：

Flex-flow：colum warp;这是flex-direction和flex-warp的缩写

下面的是写在子元素里的：

flex-grow:0; (默认)当子元素有剩余空间时，最大是1。 会自动分配填充控件会填充满所有空间 当再加入一个空间时无法换行 没有空间这个无效

flex-shrink:1; (默认)当子元素无剩余空间时 随着其他空间的加入会影响这个元素的大小 flex-shrink:1;大家都一样等比缩小 flex-shrink:0;会不变能能为负数 越大空间越小

flex-basis：auto;(默认) 设置宽度

justify-self:;作用主轴独立个体

aglin-self:;作用侧轴独立个体和aglin-items一样只不过这个作用与个体

order:0;会按大小排列 （默认）例如：order:-1;会排到前面去