css中的flex布局

　　好久没有更新内容了，今天记录下弹性布局的知识点，比较简洁，不多说其他话了，直接开写。

　　一、flex布局的设置方式和组成部分

　　　　设置方式：在需要弹性布局区域的父元素上添加dispaly: flex，这个父元素必须是直系父元素。

　　　　组成部分：弹性容器、弹性盒子、主轴、侧轴或交叉轴。

　　二、属性：

　　　　1、justify-content

　　　　　　调节元素在主轴的对齐方式，默认主轴是水平方向（x轴）。（添加在弹性容器中）

flex-start	默认值，起点对齐
flex-end	终点对齐
center	沿主轴居中对齐
space-around	均匀排列，盒子之间的间距是左右两头间距的2倍
space-between	均匀排列，只有盒子之间有间距（这个我用的比较多）
space-evenly	均匀排列，所有地方间距相等

　　　　2、align-items和align-self

　　　　　　align-items：调节元素在侧轴对齐方式（添加到弹性容器中）

　　　　　　align-self:　控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子中）

flex-start	默认值，起点对齐
flex-end	终点依次排列
center	侧轴居中排列
stretch	默认值，弹性盒子沿着主轴线被拉伸至铺满容器，

　　　　3、flex属性

　　　　　　属性：flex: 值

　　　　　　定义项目分配父盒子剩余尺寸份数，剩余的意思 = 父盒子的宽度 - 子盒子中没有设置flex的宽度。

　　　　　　举个栗子：

　　　　　　　　父盒子：display: flex; width: 200px;

　　　　　　　　A盒子：flex: 2

　　　　　　　　B盒子：flex: 1

　　　　　　　　C盒子：width: 50px

　　　　　　　　则： 剩余的尺寸 = 200px - 50px；那么A盒子 = (剩余的尺寸 * 2) / 3  B盒子 = (剩余的尺寸 * 1) / 3

　　　　4、修改主轴方向

　　　　　　使用fle-direction改变元素排列方向

row	行（水平方向， 左==》右）
column	列（垂直方向，上===》下）
row-reverse	行（右==》左）
column-reverse	列（下==》上）

　　　　　5、flex-wrap弹性盒子换行

　　　　　　　　可以实现弹性盒子多行排列效果

　　　　　　　　属性： flex-wrap: wrap换行 | nowrap 不换行

　　　　

　　　　因为项目中经常使用到flex布局，所以在这里记录了一下，毕竟好记性不如烂笔头。