flex布局（弹性布局）

一、概念

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"

      容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

二、属性

设置flex布局（给上级元素添加的样式，子元素具有flex布局的性能）

display:flex;             //块级元素的
display: inline-flex;     //行内元素的

改变元素排列方向 flex-direction 给父盒子添加

flex-direction:row;             水平方向排列（默认值）
flex-direction:column;          垂直方向排列
flex-direction:row-reverse;     (反转) 水平方向从右向左                 
flex-direction:column-reverse;  (反转) 垂直方向从下向上

主轴对齐方式 justify-content

justify-content:center;           实现居中效果，剩余空间给两端平分，之间没有间距
justify-content:space-around;     弹性盒子（子盒子）之间的间距是两端间距的2倍
justify-content:space-between;    间距出现在弹性盒子之间，两端没有间距  
justify-content:space-evenly;     各个间距都相同，两端和之间

调节元素侧轴的对齐方式 align-items

align-items:center;    侧轴居中的效果    
align-items:stretch;   侧轴拉伸的效果，尺寸可以和父级相同，想要看到拉伸效果，把子级高度去掉（高度是默认侧轴可以更改变为宽度）
align-items:flex-end;  侧轴末尾对齐效果

侧轴排列方式 aligin-self 给子盒子添加，改变某一个子盒子的侧轴排列方式

aligin-self:center;       侧轴居中的效果
aligin-self:flex-end;    侧轴末尾对齐效果
aligin-self:stretch;      侧轴拉伸效果（去掉侧轴高度，或更改主轴去掉宽度）

换行，想要弹性盒子宽度（高度）不够换行显示

 flex-wrap: wrap;

aligin-content 更改行与行的对齐方式（类似改侧轴，但是换行后更改侧轴变化不大，改不了）

aligin-content:center;   实现居中效果，剩余空间给两端平分，之间没有间距
aligin-content:space-around;  弹性盒子（子盒子）之间的间距是两端间距的2倍
aligin-content:space-between;  间距出现在弹性盒子之间，两端没有间距          
aligin-content:space-evenly;  各个间距都相同，两端和之间

flex 设置弹性伸缩比 占有父级剩余尺寸

是份数，所有子盒子的份数加在一起就是把父级剩余部分分成几份，然后单个盒子设置多少份就是多少份。

flex:2;
flex:50%;