本文主要是介绍移动端flex布局项目之携程网首页，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
移动端flex布局项目之携程网首页
文章目录
- 移动端flex布局项目之携程网首页
- 前言
- 一、前期准备
- 1.1 建立文件夹
- 1.2 设置视口标签以及引入初始化样式
- 1.3 常用初始化样式
- 二、技术点
- 2.1 弹性布局的实质是`设置了主轴上的flex属性从而设置了宽或高是比例值而不是确定值，其他属性依然要按照pc端那样写`
- 2.1.1 与流式布局相比，`flex布局也是使元素的宽或高不是确定值，流式布局仅仅是元素的宽是百分比，高是要确定的。`
- 2.2 小盒子内容的flex布局
- 总结
前言
基本上只使用flex布局来完成项目
一、前期准备
1.1 建立文件夹
1.2 设置视口标签以及引入初始化样式
<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><link rel="stylesheet" href="css/normalize.css"><link rel="stylesheet" href="css/index.css">
1.3 常用初始化样式
body {max-width: 540px;min-width: 320px;margin: 0 auto;font: normal 14px/1.5 Tahoma,"Lucida Grande",Verdana,"MicrosoftYahei",STXihei,hei;color: #000;background: #f2f2f2;overflow-x: hidden;-webkit-tap-highlight-color: transparent;
}
二、技术点
2.1 弹性布局的实质是设置了主轴上的flex属性从而设置了宽或高是比例值而不是确定值，其他属性依然要按照pc端那样写
2.1.1 与流式布局相比，flex布局也是使元素的宽或高不是确定值，流式布局仅仅是元素的宽是百分比，高是要确定的。
2.2 小盒子内容的flex布局
总结
这篇关于移动端flex布局项目之携程网首页的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
