移动开发—详解flex布局之携程网首页案例制作

移动开发—详解flex布局之携程网首页案例制作

移动开发—详解flex布局之携程网首页案例制作

学习内容

​​一、flex的布局原理​​

​​二、flex布局父项常见的属性​​

​​三、flex布局子项常见的属性​​

​​四、携程网首页案例制作​​

一、flex的布局原理

二、flex布局父项常见的属性

（一）、flex-direction设置主轴的方向

主轴与侧轴

flex-direction属性决定主轴的方向（即项目排列的方向）

注意：主轴和侧轴是会变化的，看flex-direction设置谁为准，剩下的就是侧轴，而我们的子元素是跟着主轴来排列的

三、flex布局子项常见的属性

（三）、order属性定义子项的排列顺序（前后顺序）

数值越小，排列越靠前，默认值为0 注意：和 z-index不一样

四、携程网首页案例制作

一、技术选型

方案：采用单独制作移动页面的方案

技术：布局采用flex布局

• 景点 玩乐
• 周边游
• 美食林
• 一日游
• 当地攻略

• WiFi电话卡
• 保险签证
• 外币兑换
• 购物
• 当地导向
• 自由行
• 境外玩乐
• 礼品卡
• 信用卡
• 更多

热门活动

获取更多福利

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。