HTML弹性布局思路及使用方式

弹性布局使用方式

兼容性：适合使用手机端；pc 直接放弃（原因，项目需要兼容所有浏览器 ie10 以上考虑）
粥店：微信，微信小程序，各个小程序，优先弹性布局

使用规则：
1：找到父容器，给父容器display：flex
2：一旦容器变成flex布局，主轴 与 交叉轴 就会存在 （你用或者不用它都在那里）
3：确定主轴方向：flex-direction 默认水平方向 从左往右—>决定 子元素水平方向排列
4：在主轴上怎么排列—>justify-content 决定 左对齐 右对齐 居中 元素之间距离相等对齐。。。
5：看纵向布局是否有规律？
有：—> align-item 元素在竖直方向对齐方式 上对齐 下对齐 居中对齐 ，文字基线对齐
没有：但是有布局—> margin padding position

注意：

1：一般子元素在父容器中不会内容溢出（只会变小）

总结：页面布局思路

页面是由html构成的，熟悉html本身默认特点【很重要】
布局重要：尽量通过结构，利用流式布局

如何构建结构

1：只要看到从上往下的布局；就在这几个子元素外部加一个【父容器】
—>原理： 子元素在父容器中 从上往下；并且可以撑起父容器的高度

2：只要看到从左往右的布局方式
—>原理： 子元素一定变成inline元素； inline inline-block
3：将元素变为 inline inline-block 方式？
- 显示转化： display：inline || inline-block
- 隐式转化： 给子元素添加 position float 给父容器添加display：flex
4：确定元素特点后：
- 左右对齐方式有规律；首选 float
- 所有子元素从左往右； 间距相同；排列有规律；公司要求不兼容ie10以下 —>flex布局
- 特殊情况 position：absolute；
-只要看到在屏幕上固定不变；只能使用position：fixed