Flex布局
Flex布局方式，Flex属性，响应式布局，PC和移动端布局，使用FLex进行简单的PC和移动端布局
基础知识点：main start 主轴开始位置 main end 主轴结束位置 ，cross start 交叉轴的开始位置 cross end 交叉轴的结束位置。main size 主轴大小 cross size 交叉轴大小。
Flex的使用规则：通过display:flex; 开启盒子弹性布局，盒子内所有元素（无论是块级元素还是行内元素都一样）布局默认在主轴上由main strat沿着main end 方向排布！
Flex Container 上的相关css属性
1.flex-flow(属性用于设置或检索弹性盒模型对象的子元素排列方式,缩写属性--》flex-direction||flex-warp)属性值：row-reverse warp
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .container{ display: flex;/* 开启container盒子的Flex布局 */ /* flex-flow:row nowrap 默认值*/ flex-flow: row-reverse wrap;/* 弹性盒的元素以相反的顺序显示，且在必要的时候进行拆行 */ } .baby1{ background: antiquewhite; height: 100px; width: 100px; } .baby2{ background: aqua; height: 100px; width: 100px; } .baby3{ background:coral; height: 100px; width: 100px; } .baby4{ background: chartreuse; height: 100px; width: 100px; } </style> </head> <body> <div class="container"> <div class="baby1">baby1</div> <div class="baby2">baby2</div> <div class="baby3">baby3</div> <div class="baby4">baby4</div> </div> </body> </html>
2.flex-direction
flex-direction:
row; 决定主轴方向，row为flex-direction的默认值， 默认方向主轴main start向main end！
row-reverse;改变主轴方向由右方向左
column;改变主轴方向由上往下
column-reverse;改变主轴方向由下往上
3.flex-warp
flex-warp：nowrap；默认情况下所有的flex-items都会在同一行显示
warp;当容不下时候就换行
wrap-reverse:多行反向
4. justify-content
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .container{ display: flex;/* 开启container盒子的Flex布局 */ justify-content: space-around; /* flex strat ;默认在主轴方向开始位置对齐 决定主轴的对齐方式 flex end;主轴结束位置对齐 center;居中对齐 space-between;间距相等对齐，不含两边 space-evenly;均分间距对齐，包括两边，IE占不支持 space-around;中间间距为两边间距的两倍等分对齐 */ } .baby1{ background: antiquewhite; height: 100px; width: 100px; } .baby2{ background: aqua; height: 100px; width: 100px; } .baby3{ background:coral; height: 100px; width: 100px; } .baby4{ background: chartreuse; height: 100px; width: 100px; } </style> </head> <body> <div class="container"> <div class="baby1">baby1</div> <div class="baby2">baby2</div> <div class="baby3">baby3</div> <div class="baby4">baby4</div> </div> </body> </html>
5.algin-items
algin-items：normal 在子元素没有设置高度时，默认normal在交叉轴上拉伸
6.align-content
align-content:stretch;默认值 决定多行在交叉轴上的对齐方式
flex-strat:在交叉轴上依次排列
space-evenly:在交叉轴上等距离均分
flex items上的相关css属性
1. flex
flex是flex-grow||flex-grow||flex-shrink||flex-basis缩写，可以指定1,2,3个值
2.flex-grow
flex-grow的总和(sum)加起来大于一，每个flex item扩展的size为flex container的剩余size*flex-grow/sum
小于一，每个flex item扩展的size为flex container的剩余size*flex-grow
flex items扩展后的最终size不能超过max-width\max-height
3. flex-basis
决定主轴的上的宽度大小
决定flex item最终base size 的因素，从优先级由高到低
max-width\max-width\min-width\min-height
flex-basis
width\height
内容自身的size
4.flex-shrink
收缩；默认值为一，不能小于min-width/min-height
5.order
决定排布顺序,值越小排在越前面
