Flex总结

     最新开发一个小程序，复习了一下flex, 好记性真的不如一个烂笔头啊，长时间不用都遗忘了

1， 任何容器都可以设置成 flex 容器

.box {

    display: flex;

}

行内容器也可以设置成flex布局

.box {

    display: inline-flex;

}

2, 容器的六个属性

  (1) - flex-direction: 决定主轴的方向，即项目的排列方向    

flex-direction: row 默认值，水平排列，起点左端

flex-direction: row-reverse 水平排列，起点右端

flex-direction: column 垂直方向， 起点在上边

flex-direction: column-reverse 起点在下边

 (2) flex-wrap 属性 默认情况项目都排在一条线上。

 flex-wrap : nowrap 默认 不换行

 flex-wrap : wrap  换行，第一行在上面

 flex-wrap : wrap-reverse 换行， 在第一行的下面

(3) flex-flow 属性是 flex-direction 和 fle-wrap的简写形式

  

 flex-flow: row nowrap

(4) justify-content 属性定义了项目在主轴的堆砌方向  

justify-content : flex-start 左对齐

justify-content : flex-end 右对齐

justify-content : center 居中

justify-content : space-between 左端对齐，项目平分

justify-content : space-around 项目左右两边间距相等

(5)align-items 属性 定义了项目在交叉轴上的对齐方式     

align-items : flex-start 交叉轴的起点

align-items : flex-end 交叉轴的终点

align-items : center 交叉轴中心

align-items : baseline项目第一行文字的基线对齐

align-items : stretch 默认值， 如果没有设置容器的高度获取设置为auto，将占满整个容器

(6) align-content 属性

   六个属性   

flex-shrink : 1 默认为1 ，当容器不够分配时，元素都将等比例缩小，占满整个容器

flex-grow: 0 默认为0 ，当容器有多余的空间，剩下的不进行分配

flex-basic: 设置元素在主轴上的初始化尺寸，其实就是width,宽度

flex-basis: 0 根据内容撑开宽度

flex-basis: 50px 非0时，就是width, 不过优先级比width更高一些

flex-basis: auto 如果设置了width则元素尺寸由width决定，没有设置则由内容决定

(7) 常用的复合属性    

flex: flex-grow  flex-shrink flex-basis

flex: 2 1 100px;

flex : auto = flex: 1 1 auto 

flex : none = flex: 0 0 auto 固定尺寸，不伸缩