加载中...
avatar
文章
106
标签
39
分类
32
首页
时间轴
标签
分类
图库
友情
关于
留言板
Tao ying
搜索
首页
时间轴
标签
分类
图库
友情
关于
留言板

移动Web开发之flex布局

发表于2023-04-08|更新于2025-11-10|前端CSS移动端web开发
|阅读量:
文章作者: Tao ying
文章链接: https://ruoshui-30.github.io/post/2186894026.html
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Tao ying！
移动Web开发
cover of previous post
上一篇
移动Web开发之流式布局
cover of next post
下一篇
移动Web开发之rem适配布局
相关推荐
cover
2023-04-08
移动Web开发之grid布局
cover
2023-04-08
移动Web开发之流式布局
评论
avatar
Tao ying
手握鐵劍，心中無敵！
文章
106
标签
39
分类
32
Follow Me
公告
双 手 合 十 成 为 自 己 的 神, 自 己 所 信 念 的 即 是 信 仰

mao

微信号：GCT1612674018

QQ号：1612674018

目录
  1. 1. 一、flex布局体验
    1. 1.1. 1.1 传统布局与flex布局
    2. 1.2. 1.2 初体验
  2. 2. 二、flex布局原理
    1. 2.1. 2.1 布局原理
  3. 3. 三、flex布局父项常见属性
    1. 3.1. 3.1 常见父项属性
    2. 3.2. 3.2 flex-direction设置主轴的方向
    3. 3.3. 3.3 justify-content设置主轴上的子元素排列方式
    4. 3.4. 3.4 flex-wrap设置子元素是否换行
    5. 3.5. 3.5 align-items设置侧轴上的子元素排列方式（单行）
    6. 3.6. 3.6 align-content 设置侧轴上的子元素的排列方式（多行）
    7. 3.7. 3.7 align-content和align-items区别
    8. 3.8. 3.8 flex-flow
  4. 4. 四、flex布局子项常见属性
    1. 4.1. 4.1 flex属性
    2. 4.2. 4.2 align-self控制子项自己在侧轴上的排列方式
    3. 4.3. 4.3 order属性定义项目的排列顺序
  5. 5. 五、携程网首页案例制作
  6. 6. 六、携程网首页案例重点强调
    1. 6.1. 6.1 搜索模块
    2. 6.2. 6.2 渐变
      1. 6.2.1. 6.2.1 背景渐变
      2. 6.2.2. 6.2.2 文字渐变
最新文章
网站分享第六期
网站分享第六期2025-12-31
网站分享第五期
网站分享第五期2025-11-19
网站分享第四期
网站分享第四期2025-11-18
网站分享第三期
网站分享第三期2025-11-12
网站分享第二期
网站分享第二期2025-11-12
©2020 - 2026 By Tao ying
框架 Hexo|主题 Butterfly
搜索
数据库加载中