布局

弹性布局使用方式

重点：微信；微信小程序；各个小程序优先弹性布局
使用规则：1：找到父容器：给父容器设置display：flex2:一旦容器变为flex布局，主轴 与 交叉轴就会存在（你用不用都存在）3：确定主轴方向：flex-deriction 默认水平方向 从左往右---->决定子元素横向的排列4：在主轴上怎么排列--------->justify-content 决定 左对齐 右对齐 居中 元素之间距离相等5：看纵向布局是否有规律？ 有：在------>align-item 元素在竖直方向上随其方式 上对其 下对齐 居中对齐 文字基线对齐 拉伸 没有但有布局------> margin padding position
注意： 1： 一般子元素在 父容器 中不会溢出（只会变小）

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

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

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