微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > 博客列表 > Web 前端 - CSS - Flex 弹性布局及仿 php 中文网移动端布局实战
博主信息
博文 33
粉丝 0
评论 0
访问量 35148
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
Web 前端 - CSS - Flex 弹性布局及仿 php 中文网移动端布局实战
郴
原创
1053人浏览过

Web 前端 - CSS - Flex 弹性布局及仿 php 中文网移动端布局实战

[toc]

作业的公网链接

一、概述

序号 内容 描述
1 解释 弹性盒子，即宽度和高度可以进行弹性伸缩的盒子，意为弹性布局
2 特点 元素大小可以在容器中自动伸缩以适应容器的变化
3 场景 主流的布局方式，特别适合移动端布局

二、主轴、交叉轴与布局方向

序号 内容 描述
1 布局方向 flex 为一维布局，即一个物体在一个平面中，平面拥有横轴和纵轴，物体要么水平排列，要么垂直排列，布局方向也分为水平方向和垂直方向
2 主轴 主轴作为元素主要的排列方向，主轴可以是横轴，也可以是纵轴。如果主轴是横轴，那么元素的的布局方向为水平排列；如果主轴是纵轴，那么元素的的布局方向为垂直排列
3 交叉轴 交叉轴作为副轴，起到辅助排列元素的作用。交叉轴可以是横轴，也可以是纵轴。如果主轴是横轴，那么交叉轴就是纵轴；如果主轴是纵轴，那么交叉轴就是横轴

三、容器

1. 属性

序号 属性 描述 备注
1 flex-direction 设置容器的主轴，即子元素的排列方式
2 flex-wrap 是否允许换行 适用于多行容器布局
3 flex-flow flex-direction和flex-wrap属性的简写
4 justify-content 设置子元素在主轴上的对齐方式 主轴上有剩余空间才有意义
5 align-items 设置子元素在交叉轴上的对齐方式 交叉轴上有剩余空间才有意义
6 align-content 在多行容器中，设置子元素在交叉轴上的对齐方式 交叉轴上有剩余空间才有意义
  • 容器即父元素，通过display:flex设置
  • 多行容器是指允许换行的容器

2. 值

序号 值 描述 适用元素
1 row 默认值。水平方向，顺序为从左往右 flex-direction
2 row-reverse 水平方向的相反方向，顺序为从右往左 flex-direction
3 column 垂直方向，顺序为从上往下 flex-direction
4 column-reverse 垂直方向的相反方向，顺序为从下往上 flex-direction
5 nowrap 默认值。不换行 flex-wrap
6 wrap 换行 flex-wrap
7 flex-start 默认值。起始线对齐 justify-content
8 flex-end 终止线对齐 justify-content
9 center 居中对齐 justify-content
10 space-evenly 平均对齐。剩余空间在每个子元素之间平均分配 justify-content
11 space-around 分散对齐。剩余空间在每个子元素两侧平均分配 justify-content
12 space-between 两端对齐。剩余空间在头尾子元素之外的子元素之间平均分配 justify-content
13 flex-start 默认值。起始线对齐 align-items
14 flex-end 终止线对齐 align-items
15 center 居中对齐 align-items
16 stretch 默认值。子元素拉伸占据整个交叉轴 align-content
17 flex-start 默认值。起始线对齐 align-content
18 flex-end 终止线对齐 align-content
19 center 居中对齐 align-content
20 space-evenly 平均对齐。剩余空间在每个子元素之间平均分配 align-content
21 space-around 分散对齐。剩余空间在每个子元素两侧平均分配 align-content
22 space-between 两端对齐。剩余空间在头尾子元素之外的子元素之间平均分配 align-content

四、项目

1. 属性

序号 属性 描述 备注
1 flex-grow 放大因子。将主轴上的剩余空间按比例分配给指定项目 主轴上有剩余空间才有意义
2 flex-shrink 缩小因子。将项目上多出的空间按比例在指定项目中进行缩减
3 flex-basis 项目在分配主轴的剩余空间之前，某项目所占据的主轴空间宽度 权重大于 width
3 flex flex-grow、flex-shrink和flex-basis属性的简写
4 align-self 单独设置某项目在交叉轴上的对齐方式 会覆盖容器的 align-items 属性
5 order 自定义某项目在主轴上的排列顺序，默认为 0，值越小位置越靠前

2. 值

序号 值 描述 适用元素
1 auto 默认值。继承 align-items 属性值 align-self
2 auto 默认值。继承 align-items 属性值 align-self
3 flex-start 默认值。起始线对齐 align-self
4 flex-end 终止线对齐 align-self
5 center 居中对齐 align-self
6 stretch 拉伸对齐 align-self
7 stretch 拉伸对齐 align-self
8 baseline 与基线对齐 align-self
  • 项目即子元素，被包裹在容器中

五、代码实例

  1. <!DOCTYPE html>
  2. <html lang="zh_hans">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>商城</title>
  7.     <link rel="stylesheet" href="css/index.css" />
  8.     <link rel="stylesheet" href="css/font-icon.css" />
  9.   </head>
  10.   <body>
  11.     <!--头部区域-->
  12.     <header>
  13.       <!--顶部登录模块-->
  14.       <div class="login-box">
  15.         <!--登录图标-->
  16.         <a href="#"><span class="iconfont h_icf">&#xe656;</span></a>
  17.         <!--官网图标-->
  18.         <a href="#"><span class="iconfont h_icf">&#xe669;</span></a>
  19.         <!--列表图标-->
  20.         <a href="#"><span class="iconfont h_icf">&#xe65a;</span></a>
  21.       </div>
  22.       <!--轮播图模块-->
  23.       <div class="sli-box">
  24.         <img src="/image/banner.jpg" alt="banner" />
  25.       </div>
  26.       <!--导航栏模块-->
  27.       <nav>
  28.         <a href="#"
  29.           ><span>
  30.             <img src="/image/html.png" alt="html" />
  31.             <p>HTML</p>
  32.           </span></a
  33.         >
  34.         <a href="#"
  35.           ><span>
  36.             <img src="/image/html.png" alt="html" />
  37.             <p>CSS</p>
  38.           </span></a
  39.         >
  40.         <a href="#"
  41.           ><span>
  42.             <img src="/image/html.png" alt="html" />
  43.             <p>JavaScript</p>
  44.           </span></a
  45.         >
  46.         <a href="#"
  47.           ><span>
  48.             <img src="/image/html.png" alt="html" />
  49.             <p>PHP</p>
  50.           </span></a
  51.         >
  52.         <a href="#"
  53.           ><span>
  54.             <img src="/image/html.png" alt="html" />
  55.             <p>MySQL</p>
  56.           </span></a
  57.         >
  58.         <a href="#"
  59.           ><span>
  60.             <img src="/image/html.png" alt="html" />
  61.             <p>Layui</p>
  62.           </span></a
  63.         >
  64.         <a href="#"
  65.           ><span>
  66.             <img src="/image/html.png" alt="html" />
  67.             <p>Laravel</p>
  68.           </span></a
  69.         >
  70.         <a href="#"
  71.           ><span>
  72.             <img src="/image/html.png" alt="html" />
  73.             <p>Redis</p>
  74.           </span></a
  75.         >
  76.       </nav>
  77.     </header>
  78.     <!--主体区域-->
  79.     <main>
  80.       <!--精品推荐模块-->
  81.       <p>精品推荐</p>
  82.       <section>
  83.         <a href="#"
  84.           ><span
  85.             ><img src="/image/a1.jpg" alt="a1" />
  86.             <p>前端入门课程</p></span
  87.           ></a
  88.         >
  89.         <a href="#"
  90.           ><span
  91.             ><img src="/image/a1.jpg" alt="a1" />
  92.             <p>前端进阶课程</p></span
  93.           ></a
  94.         >
  95.         <a href="#"
  96.           ><span
  97.             ><img src="/image/a1.jpg" alt="a1" />
  98.             <p>PHP入门课程</p></span
  99.           ></a
  100.         >
  101.         <a href="#"
  102.           ><span
  103.             ><img src="/image/a1.jpg" alt="a1" />
  104.             <p>PHP进阶课程</p></span
  105.           ></a
  106.         >
  107.       </section>
  108.       <!--文章列表模块-->
  109.       <p>文章列表</p>
  110.       <article>
  111.         <a href="#"
  112.           ><span
  113.             ><img src="/image/php.png" alt="php" />
  114.             <span
  115.               ><h3>php基础语法课程-第1课</h3>
  116.               <p>
  117.                 好多同学在PHP基础的时候对PHP文件的操作了解的不够多
  118.               </p></span
  119.             >
  120.           </span></a
  121.         >
  122.         <a href="#"
  123.           ><span
  124.             ><img src="/image/php.png" alt="php" />
  125.             <span
  126.               ><h3>php基础语法课程-第2课</h3>
  127.               <p>
  128.                 好多同学在PHP基础的时候对PHP文件的操作了解的不够多
  129.               </p></span
  130.             >
  131.           </span></a
  132.         >
  133.         <a href="#"
  134.           ><span
  135.             ><img src="/image/php.png" alt="php" />
  136.             <span
  137.               ><h3>php基础语法课程-第3课</h3>
  138.               <p>
  139.                 好多同学在PHP基础的时候对PHP文件的操作了解的不够多
  140.               </p></span
  141.             ></span
  142.           ></a
  143.         >
  144.         <a href="#"
  145.           ><span
  146.             ><img src="/image/php.png" alt="php" />
  147.             <span
  148.               ><h3>php基础语法课程-第4课</h3>
  149.               <p>
  150.                 好多同学在PHP基础的时候对PHP文件的操作了解的不够多
  151.               </p></span
  152.             ></span
  153.           ></a
  154.         >
  155.         <a href="#"
  156.           ><span
  157.             ><img src="/image/php.png" alt="php" />
  158.             <span
  159.               ><h3>php基础语法课程-第5课</h3>
  160.               <p>
  161.                 好多同学在PHP基础的时候对PHP文件的操作了解的不够多
  162.               </p></span
  163.             ></span
  164.           ></a
  165.         >
  166.         <a href="#"
  167.           ><span
  168.             ><img src="/image/php.png" alt="php" />
  169.             <span
  170.               ><h3>php基础语法课程-第6课</h3>
  171.               <p>
  172.                 好多同学在PHP基础的时候对PHP文件的操作了解的不够多
  173.               </p></span
  174.             ></span
  175.           ></a
  176.         >
  177.       </article>
  178.       <!--用来抵消脱离文档流的尾部-->
  179.       <div class="none-box"></div>
  180.     </main>
  181.     <!--尾部区域-->
  182.     <footer>
  183.       <!--首页图标-->
  184.       <a href="#"
  185.         ><span class="iconfont"
  186.           >&#xe656;
  187.           <p>首页</p></span
  188.         >
  189.       </a>
  190.       <!--分类图标-->
  191.       <a href="#"
  192.         ><span class="iconfont"
  193.           >&#xe651;
  194.           <p>分类</p></span
  195.         >
  196.       </a>
  197.       <!--购物车图标-->
  198.       <a href="#"
  199.         ><span class="iconfont"
  200.           >&#xe63d;
  201.           <p>购物车</p></span
  202.         >
  203.       </a>
  204.       <!--账户图标-->
  205.       <a href="#"
  206.         ><span class="iconfont"
  207.           >&#xe658;
  208.           <p>账户</p></span
  209.         >
  210.       </a>
  211.     </footer>
  212.   </body>
  213. </html>
  1. /*框架样式*/
  2. * {
  3.   margin: 0;
  4.   padding: 0;
  5. }
  6. html {
  7.   width: 100vw;
  8.   height: 100vh;
  9. }
  10. body {
  11.   min-width: 360px;
  12.   background-color: white;
  13.   display: flex;
  14.   flex-flow: column nowrap;
  15. }
  16. a {
  17.   color: #303;
  18. }
  19. /*头部样式*/
  20. header {
  21.   display: flex;
  22.   flex-flow: column nowrap;
  23. }
  24. /*登录模块样式*/
  25. .login-box {
  26.   height: 30px;
  27.   background-color: gray;
  28.   display: flex;
  29.   flex-flow: row nowrap;
  30.   justify-content: space-between;
  31.   align-items: center;
  33.   position: fixed;
  34.   width: 100vw;
  35.   top: 0;
  36. }
  37. .login-box > a {
  38.   text-decoration: none;
  39. }
  40. .login-box > a > .h_icf {
  41.   color: lightgoldenrodyellow;
  42. }
  43. /*轮播图模块样式*/
  44. .sli-box > img {
  45.   width: 100vw;
  46. }
  47. /*导航栏模块样式*/
  48. nav {
  49.   display: flex;
  50.   flex-flow: row wrap;
  51.   justify-content: space-evenly;
  52. }
  53. nav > a {
  54.   text-decoration: none;
  55. }
  56. nav > a > span {
  57.   width: 25vw;
  58.   display: flex;
  59.   flex-flow: column nowrap;
  60.   justify-content: center;
  61.   align-items: center;
  62. }
  63. nav > a > span > img {
  64.   width: 12vw;
  65. }
  66. /*主体样式*/
  67. main {
  68.   display: flex;
  69.   flex-flow: column nowrap;
  70. }
  71. main > p {
  72.   font-size: large;
  73.   font-weight: bold;
  74.   color: gray;
  75.   margin: 5px 0 5px 15px;
  76. }
  77. /*精品推荐模块样式*/
  78. section {
  79.   display: flex;
  80.   flex-flow: row wrap;
  81.   justify-content: space-evenly;
  82. }
  83. section > a {
  84.   text-decoration: none;
  85. }
  86. section > a > span {
  87.   width: 50vw;
  88.   display: flex;
  89.   flex-flow: column nowrap;
  90.   justify-content: center;
  91.   align-items: center;
  92. }
  93. section > a > span > img {
  94.   width: 45vw;
  95. }
  96. /*文章列表模块样式*/
  97. article {
  98.   display: flex;
  99.   flex-flow: column nowrap;
  100.   justify-content: space-evenly;
  101. }
  102. article > a {
  103.   text-decoration: none;
  104.   width: 100vw;
  105.   display: flex;
  106.   flex-flow: row nowrap;
  107. }
  108. article > a:first-of-type {
  109.   margin: 0 0 5px 0;
  110. }
  111. article > a:last-of-type {
  112.   margin: 5px 0 0 0;
  113. }
  114. article > a:not(:first-of-type):not(:last-of-type) {
  115.   margin: 5px 0 5px 0;
  116. }
  117. article > a > span {
  118.   width: 100vw;
  119.   display: flex;
  120.   flex-flow: row nowrap;
  121. }
  122. article > a > span > img {
  123.   width: 35vw;
  124. }
  125. article > a > span > span {
  126.   width: 65vw;
  127.   display: flex;
  128.   flex-flow: column nowrap;
  129. }
  130. article > a > span > span > p {
  131.   color: gray;
  132.   white-space: nowrap;
  133.   overflow: hidden;
  134.   text-overflow: ellipsis;
  135. }
  136. .none-box {
  137.   width: 100vw;
  138.   height: 61px;
  139.   background-color: white;
  140. }
  141. /*尾部样式*/
  142. footer {
  143.   background-color: white;
  144.   display: flex;
  145.   flex-flow: row nowrap;
  146.   justify-content: space-around;
  148.   position: fixed;
  149.   bottom: 0;
  150.   width: 100vw;
  151. }
  152. footer > a {
  153.   text-decoration: none;
  154. }
  155. footer > a > span {
  156.   width: 25vw;
  157.   display: flex;
  158.   flex-flow: column nowrap;
  159.   align-items: center;
  160. }
  161. footer > a > span > p {
  162.   font-size: large;
  163. }


六、课程总结

  • 今天学习了 CSS 的 Flex 弹性布局，通过上课认真听讲和认真完成老师布置的作业，使得我对 CSS 的理解和运用更加深入和熟悉。最主要的知识点是明白了什么是弹性盒子、容器和项目和主轴、交叉轴与布局方向的特点，以及了解并熟悉了 Flex 布局常见属性如 flex-flow、justify-content 等的用法。
批改老师：天蓬老师天蓬老师

批改状态：合格

老师批语：布局很有意思, 也是用户对你的项目的第一印象, 如果这关过不去, 内部逻辑更牛逼, 客户也会离你而去了, 一定要重视起来
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录