flex盒弹性布局

1.flex布局定义
flez布局，也被称之为弹性盒布局，是css3里面新增的一种布局方式，通过使用flex布局，我们可以让布局更加便携高效
2.如何触发弹性盒子：
给父元素添加display属性，并且将取值设置成flex
3，触发弹性盒子有哪些特点
1.子元素默认横向显示//(类似于浮动，但不是浮动，而且不会在向下影响)
2.子元素会默认编程块级元素，能设置宽度高度（行内元素不能设置宽高）
3.如果只有一个子元素的话，则给子元素添加margin：auto的时候，会让子元素直接实现垂直居中
**

flex弹性盒的概念

**
flex容器:采用flex布局的元素的父元素
flex项目：采用flex布局容器里的子元素
横轴：水平方向的轴线
纵轴：垂直方向的轴线
主轴：触发弹性盒子之后，项目的排列方向
侧轴：触发弹性盒之后，与主轴对立的方向
修改主轴方向
属性：flex-direction

 flex-direction:row
flex-direction:row-reverse
flex-direction: column;//主轴在纵向，并且以开始位置显示
flex-direction: column-reverse;//主轴在纵向，并且以相反位置显示

flex布局的容器属性

一.如何调整项目之间的距离呢

属性：justify-content
justify-content:flex-start
justify-content:flex-end
justify-content:center

justify-content:space-between

justify-content:space-around

justify-content:space-evenly

二.如何跳转交叉轴（侧轴）上面的对其方式

属性：align-items
align-items：flex-start
align-items:flex-end
align-items:center

align-items:stretch (为拉伸效果，项目的前提是没有高度，或者是自适应的)

三.如何多放置一些项目呢？

属性：flex-wrap
当取值为
flex-wrap:no-wrap(默认，不折行，宽度挤压)
flex-wrap:no-wrap(折行，拥有自己宽度)

如果项目不设置高度的话，它会自动拉伸

四.多行中如何跳转行间距呢

条件： display: flex;
flex-wrap:wrap;
属性：align-content
当取值为：
align-content：flex-star
会实现在侧轴的开始位置显示，没有行间距
align-content：flex-end
align-content：sapce-center

align-content：space-between

align-content：space-around

align-content：space-evenly（均分）

flex布局中的项目属性

项目中的属性，主要是对项目的修饰
align-self:flex-start
align-self:flex-end
align-self:center
align-self:baseline
align-self:stretch

2.如何更改项目的显示位置（交换顺序）
默认order取值为auto
order：5
order：-1

占剩余空间的所有
给其中一个加属性flex
flex:1

给每个都加flex
flex:1

不折行不挤压的属性
flex-shrink;0

此时设置overflow：auto时