弹性布局?‍?

盒子模型

div 主要用于PC端，浮动定位...

弹性盒模型（flex）

主要针对移动端。容器：div。只对直系子元素有效。

开启弹性布局

display：flex；//给父级

轴概念（默认情况）

元素在主轴的排序方式（父级）

justify-content:flex-start;//开始位置 默认值
justify-content:flex-end;//针对主轴排到末尾
justify-content:space-around;//自适应排列 两边有缝
justify-content:space-between;//两边对齐没有缝
justify-content:flex-center;//针对主轴排到中间

设置主从轴（父级）

flex-direction:row;//默认X轴
flex-direction:column;//Y轴为主轴
flex-direction:column-reverse;//Y轴翻转
flex-direction:row-reverse;//X轴翻转

元素在从轴的排序方式（父级）

align-items:center;//居中
align-items:baseline;//基线 按照内容高度设置排列方式

元素操作（父级）

flex-wrap:wrap;//当内部子元素超出父容器 换行
flex-wrap:nowrap;//不换行
flex-wrap:nowrap-reverse;//换行反转

操作子元素（子集）?

align-self:center;//针对单个元素 让他单独对于从轴居中
align-self:flex-end;//针对单个元素 让他单独对于从轴尾部
order:1;//排序，值越大越靠后 默认为0 
flex-grow:1;//控制元素拉伸比 撑满
flex-shrink:.5;//控制元素的损失比 比例越大损失越多