flex布局

1. flex 是 “弹性布局”，采用flex布局的元素，称为flex容器，他的所有子元素自动成为容器成员，称为flex项目。任何一个容器都可以指定flex布局 （ps：设置为flex布局后，所有子元素的float，clear，vertical-algin 都会失效）

.box{

    diaplay:flex;

}

2. 父元素的属性一共有六个(flex-direction,flex-wrap,flex-row,justify-content,align-items,align-content)

    （1）flex-direction  决定主轴的方向  值为 row(水平左上) row-reveser（水平左下）column（竖直）column-reveser；

    （2）flex-wrap: 换不换行默认nowrap  nowrap（不换行），wrap（换行，第一行在上方），wrap-reveser(换行 第一行在下边)

    （3）flex-flow: 以上两者的简写   默认为 row nowrap

    （4）justify-content: 在主轴上的定义方式（子元素在水平方向的排列顺序）属性值有=》    flex-start：左对齐（默认值）， flex-end:右对齐， flex-center:居中   space-between: 子元素头尾两端对齐，中间元素间隔相等   space-around:每个子元素两侧的间隔相等，所有子元素的间隔比与边框的距离大一倍

    （5）align-items:  子元素在垂直方向上的排列方式    flex-start:上对齐  flex-end：下对齐  center:垂直居中  stretch（默认值）：如果子元素未设置高度 则沾满整个容器的高度   base-line:   项目的第一行文字的基线对其

（6）align-content:  只有一条轴线的时候不起作用，取值与justify-conten差不多

3.子元素的属性

    （1）order：定义排位顺序，数字越小越靠前

    （2）flex-grow:默认为0，存在剩余空间的化的放大比例，如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

    （3）flex-shrink:默认为0，如果空间不足的缩小比例   ，如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

负值对该属性无效。

    （4）flex-basis: 默认值为auto，在项目分配剩余空间之前定义的占据空间的大小

    （5）flex属性 ： 是flex-grow  flex-shrink flex-basis 三个属性的缩写，默认为 0，1，auto，

  有两个快捷值auto（1，1，auto） none(0,0,auto)

    (6)align-self: 允许单个项目与其他项目不一样的对其方式，可覆盖父元素的 algin-items 属性，属性值与align-items 相同

            

总结：  常用的flex：1   写法实际为（1，1，auto） 即当写法为一个非负数时代表的时flex-grow的值，当为两个非负数时则代表的是  flex-grow 和 flex-shrink  ，当为长度或者百分比的时候则代表的是 flex-basis