flexBox
flexBox布局方式
flexBox布局方式是一维布局方式,按行或按列排布元素,它解决了对齐、分布和响应式的问题
开启flex布局
开启flex布局只需要在外层设置
display:flex;
即可开启flex布局模式，它的子元素会按行排列(按照主轴排列)
主轴和交叉轴
flex容器含有一个水平方向的主轴和一个垂直方向的交叉轴
容器子元素会按照主轴和交叉轴的起始位置开始排列，即容器的左上角
改变主轴方向排列
改变主轴方向排列使用justify-content属性
靠右对齐
justify-content:flex-end;
居中对齐
justify-content:center;
平分空间
justify-content:space-evenly;
两端对其
justify-content:space-between;
改变交叉轴方向排列
改变主轴方向排列使用align-items属性
靠下对齐
align-items:flex-end;
居中对齐
align-items:center;
改变模式
改变为列模式只需要设置父容器
flex-direction:column;
此时主轴变为交叉轴，交叉轴变为主轴，其他设置项和行模式一样
子元素flex属性
子元素可以设置flex属性来分配空间占比
例如三个子元素分别为flex:1,flex:2,flex:1,则第二个元素占二分之一，一三两个元素平分剩下空间
父容器flex-wrap属性
flex-wrap是指会不会分行的意思，默认是nowrap，当子元素排列大小超过父容器大小，并不会分行，而是平分子元素大小，仍然挤在一行
例如
html
<div class="container">
<div class="item one"></div>
<div class="item two"></div>
<div class="item three"></div>
<div class="item four"></div>
<div class="item five"></div>
</div>css
.container {
display: flex;
background-color: beige;
width: 400px;
height: 100px;
}
.item {
width: 100px;
height: 60px;
border-radius: 6px;
}
.one{background-color: red}
.two{background-color: greenyellow}
.three{background-color: aquamarine}
.four{background-color: aqua}
.five{background-color: darkorange}效果
可以看到100*5>400,所以实际上每个方块都被压缩了宽度
在父容器中加入
flex-wrap:wrap;
效果
可以看到超出部分直接换行。如果父容器设置了高度，父容器高度不会被撑开，如果没有设置则会直接撑开父容器高度
父容器flex-flow属性
flex-flow属性是flex-direction和flex-wrap属性组合起来的缩写,例如
flex-flow:column wrap;
父容器align-content属性
align-content是用来调整当父容器wrap多余一行之后，行与行之间的对其方式
子元素order属性
order属性用于调整子元素排列顺序，默认为0，给元素设定好order后，小的会排在大的前面，比如将一个子元素设定order位1，其余默认，则这个子元素会排到最后面，设定为-1，则会排到最前面
子元素align-self属性
align-self是用于覆写父容器的align-items设定的，可以设定为flex-start,flex-end,center等，会覆盖掉父元素的设定
子元素flex-basis属性
flex-basis是设定子元素的主轴方向的大小的
例如:
父容器的flex-direction为row,设定子元素flex-basis后，子元素的宽度width会失效，转而是由flex-basis设定的大小来取代原有宽度;
父容器的flex-direction为column,设定子元素flex-basis后，子元素的高度height会失效，转而是由flex-basis设定的大小来取代原有高度;
flex-basis设置为0，则等同于width/height是0的效果，只要容器本身没有overflow:hidden的设定，则大小就取决于内容的大小
flex-basis设置为auto，则按照容器本身的大小计算,也就是取决于容器的width/height
子元素flex-grow属性
flex-grow是指当父容器主轴方向有剩余空间的时候,子元素沿主轴方向扩大的设定。
和子元素的flex属性类似，当主轴有剩余大小时候，设定子元素的flex-grow为0，则保持原有大小不变
假如有三个元素，分别设定flex-grow为0，1，2，则第一个元素保持不变，第二个元素向主轴方向扩大主轴方向剩余空间的1/3大小,第三个元素扩大2/3大小
子元素flex-shrink属性
flex-shrink和flex-grow相反,是指当子元素沿主轴方向大小的总和，超过了父容器的大小的时候，子元素沿主轴方向怎样缩小，用法同flex-grow类似
再看子元素的flex属性
子元素的flex属性其实是flex-grow,flex-shrink,flex-basis组合起来的缩写
例如:
设定子元素
flex:1 1 auto;
即是flex-grow:1,flex-shrink:1,flex-basis:auto
子元素会按照父容器的大小，平均分配空间去扩大或缩小，父容器有剩余空间是同步扩大，父容器没有剩余空间则同步缩小，
假如改为
flex:1 1 150px;
即每一个子元素宽度最多是150px;
假如改为
flex:0 0 150px;
即每一个子元素大小固定为150px,不会扩大也不会缩小
