弹性布局使用方式
兼容性:适合使用手机端;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;