flex布局

一、flex 弹性布局
可以让我们的盒子并排显示，并且也可以让行内元素转换为行内块元素
使用:在父盒子上添加属性 display:flex
flex 布局，使用时要注意自己的主轴和侧轴的设置，因为一 般情况下默认的主轴为x轴的方向，侧轴为y轴方向。

二、flex容器 (flex container )
所有 子元素自动成为 flex项目(flex item)，简称项目
子元素可横向排列也可纵向排列
原理:通过给父盒子添加flex属性，来控制子盒子的位置和排列方式
通常使用在移动端
pc端会有兼容性的问题，不同浏览器不同版本会有兼容性问题

三、父元素的属性
1. flex -direction：设置主轴方向，默认主轴方向为x轴方向，也可设置y轴为主轴
row(默认的值)；  row- reverse；   column；    column- reverse
设置主轴：flex-direction: row;

2. justify-content：设置主轴上子元素的排列方式，使用前先确定好主轴方向
flex-start ；  flex-end；   flex-end；   space -around ；   space -between
设置子项目在主轴上的排列方式：justify-content: center; 

3. flex - wrap：设置子元素是否换行，布 局中默认不换行
nowrap ；   wrap
flex布局 默认不进行换行，所有子项目会在一行显示，并平均分配父容器的宽度：flex-wrap: wrap;

4.align-items：设置侧轴上的子元素排列方式(单行)
注意：只有在单行的情况下，才能使用align-items（align-items: stretch;）
flex-start   flex-end   center   stretch (使用时子元素不设置高度，使用较少)

5.align-content：设置侧轴上的子元素排列方式(多行)，有换行时使用
flex-start ； flex-end；   center ；  space-around；   space-betweenstretch
多行情况下下，子项目对于侧轴的排列方式：align-content: space-around;

6.flex- flow：复合属性，相当于同时设置了flex-direction和flex wrap的值

四、子元素的属性
1.flex ：子项目占的分数，定义子项目分配剩余空间，用flex来表示占多少份
①flex-grow:设置弹性盒子的伸展占宽/比例。默认为0，即不会进行放大。
②flex-shrink:设置弹性盒子的缩小占宽/比例。默认为1
③flex-basis:设置弹性盒子的伸缩值。默认为auto
2.align-self：控制子项目 自己在侧轴的排列方式
                 flex-start ；   flex-end ；  enter stretch
3.order：定义子项的排列顺序(前后顺序)，默认为0，数值越小排列越靠前。