PC端通用布局方案
思路：
1.先写出HTML的结构 页眉、主体（内容区）、页脚
2.然后初始化样式通常用
3.然后考虑去除一些公共样式 去除的序列号 和 标签的下划线
4.将页眉、内容区、页脚设置弹性容器，并为主轴垂直排列。将内容区三部分设置为主轴为水平排列的弹性容器
5.页眉部分 ：将页眉部分的子元素也设置为弹性容器 ，然后再交叉轴上居中排列 。然后让里面的a标签以及内容设置 字体大小、颜色以及文本效果 （文本居中，一般通过实现）还可以设置margin值来调整靠左或者靠右距离。设置flex的放大缩小和宽度控制a标签之间的间距。
6.最后还可以通过来设置鼠标悬停后的样式
7.主体部分：设置弹性容器后，可以先设置最小高度撑开内容区。然后设置调整上与页眉和页脚的外边距。然后让内容区子元素水平方向居中排列。然后通过flex值来设置内容区三部分的宽度、放大和收缩。
8页脚部分：设置弹性容器后，设置主轴垂直排列 ，然后实现文本居中。
移动端布局
总结： flex移动端布局，当调整手机型号时，需要重新调整设置。垂直和水平容易搞混淆。还需要多练多写熟悉flex的详细属性。
HTML5 移动端自适应布局
如果您觉得本文的内容对您的学习有所帮助：
关键字：
jquery