关于flex弹性布局（一）

flex 是 Flexible Box 的缩写，就是弹性盒子布局的意思

在移动端，为了使网页能适应屏幕缩放，我们采用flex的布局方式对盒子进行填充定义

首先，来看一下最简单的布局方式

<style>
    div{
        width:80px;
        height:300px;
        background-color:pink;
}
    div span{
        width:150px;
        height:100px;
        background-color:purple;
}
</style>

<div>
      <span>1</span>
      <span>2</span>
      <span>3</span>
</div>

 在传统的布局情况下，我们所定义的盒子无法做到自适应，从而在移动端时，会变得突兀。那么采用flex布局可以改善这一情况，也是我们引用flex布局的意义

原理：flex 弹性（伸缩）布局，我们可以选择任意容器指定flex布局

           当盒子中父元素添加flex时 子元素中的 float clear vartical-align等会失效

           通常情况下，我们会对父元素添加flex，以此来控制子元素的位置和排列顺序

父项属性：

flex-direction：设置主轴方向

在flex布局中存在主轴、侧轴两个方向 同样叫法还有x、y轴，行和列......

 默认情况下 主轴即x轴 侧轴即y轴

在flex中主侧轴可变化，当flex-direction设置主轴后，剩下的就是侧轴，而我们子元素是跟随主轴来排列的

flex-direction：row                      默认从左到右排列

flex-direction：row-reverse         从右到左排列

flex-direction：column                从上到下

flex-direction：column-reverse   从下到上

justify-content：设置主轴上子元素的排列方式 ，先确定主轴为哪一个

justify-content：flex-start：            从头部开始
justify-content：flex-end：             从尾部开始
justify-content：center:                         居中
justify-content：space-around：    评分剩余空间
justify-content：space-between：  先俩边贴边，在平分空间

flex-wrap：设置子元素是否换行
默认情况下子元素不换行，如果装不下会缩小子元素宽度

flex-wrap：nowrap：默认不换行
flex-wrap：wrap：        换行

align-items:设置侧轴子元素排列（单行），控制Y轴的排列方式

align-items:flex-start：   从头部开始
align-items:flex-end：    从尾部开始
align-items:center:           垂直居中
align-items:stretch：      拉伸（子盒子不要给高度） 

align-content:设置侧轴上子元素排列方式（多行，设置子项在侧轴的排列 且只能用于换行

align-content:flex-start：                   从头部开始
align-content:flex-end：                    从尾部开始
align-content:center:                         垂直居中
align-content:space-around：          子项在侧轴平分空间
align-content:space-between：       子项在侧轴分布两头，再平分剩余空间
align-content:stretch：                     设置子项元素高度平分父元素高度

flex-flow:是flex-direction flex-wrap属性的符合属性

/*flex-direction：colimn;
flex-wrap:wrap;*/
可等价于
/*flex-flow:column wrap;*/两者效果相同