弹性布局使用方式

弹性布局使用方式

兼容性：适合使用手机端；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布局
- 特殊情况 positon:absolute;
- 只要看到在屏幕上固定不变: 只能使用position:fixed;