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

flex弹性盒模型

一. 必知术语

flex容器:具有 “display:flex;” 属性的元素
flex项目:flex 容器的直接”子元素”
主轴:flex项目排列的轴线,有水平和垂直二种
交叉轴:与主轴垂直的轴线

二. 容器属性

描述 属性
主轴方向与换行方式 flex-flow
项目在主轴上的对齐方式 justify-content
项目在交叉轴上的对齐方式 align-items
项目在多行容器交叉轴上的对齐方式 align-content

1.主轴方向与换行方式（flex-flow）

flex项目属性 属性描述
row nowrap 默认,主轴水平,不换行
row wrap 主轴水平,换行
column nowrap 主轴垂直，不换行
column wrap 主轴垂直，换行

2.项目在主轴上的对齐方式（justify-content）

flex项目属性 属性描述
flex-start 默认,起始线
flex-end 终止线
center 居中对齐
space-between 二端对齐
space-around 分散对齐
space-evenly 平均对齐

3.项目在交叉轴上的对齐方式(align-items)

flex项目属性 属性描述
stretch 默认拉伸
flex-start 起始线（顶部对齐）
flex-end 终止线(底端对齐)
center 居中

4.项目在多行容器交叉轴上的对齐方式(align-content)

flex项目属性 属性描述
stretch 默认拉伸
flex-start 起始线（顶部对齐）
flex-end 终止线(底端对齐)
center 居中

三. 项目属性

描述 属性
项目的缩放比例与基准宽度 flex
单个项目在交叉轴上的对齐方式 align-self
项目在主轴上排列顺序 order

1.项目的缩放比例与基准宽度（flex）

项目属性 描述
0 1 auto / initial 默认，禁止放大，允许收缩，宽度自动
1 1 auto / auto 允许放大和收缩
0 0 auto / none 禁止放大和收缩/PC布局

2.单个项目在交叉轴上的对齐方式（align-self）

项目属性 描述
flex-start 起始线
flex-end 终止线
stretch 默认拉伸
conter 居中

3.项目在主轴上排列顺序(order)

项目属性 描述
order: 数值顺序; 显示顺序:默认按书写的源码顺序排列
order: 数值顺序; 默认序号越小越靠前,越大越靠后

四. 梳理演示

1.项目上的flex属性

  1. <style>
  2.       /* flex容器 */
  3.       .center {
  4.         display: flex;
  5.         height: 20rem;
  6.         border: #000 solid 1px;
  7.       }
  9.       /* 项目样式：必须是flex容器的子元素 */
  10.       .center .item {
  11.         padding: 1rem;
  12.         /* width: 25rem; */
  13.         background-color: lightcyan;
  14.         border: 1px solid #000;
  15.         /* 项目是否允许放大 */
  16.         /* 自动将容器剩余空间全部占满，1的意思是每个项目平均分配剩余空间 */
  17.         flex-grow: 1;
  19.         /* 设置项目是否允许收缩 */
  20.         /* 1的意思是当空间不够时 允许项目收缩 */
  21.         /* 0的意思是当空间不够时 不允许项目收缩 */
  22.         flex-shrink: 1;
  24.         /* 设置项目在主轴空间的大小 */
  25.         /* 如果当前主轴是横的，那么他就是宽度 */
  26.         /* 如果当前主轴是垂直，那么他就是高度 */
  27.         flex-basis: 5rem;
  28.         /* max-width > flex-basis > width */
  30.         /* ----------------------------------------------------- */
  32.         /* 简写 */
  33.         /* flex：是否允许放大  是否允许收缩  计算大小 */
  34.         flex: 1 0 5rem;
  36.         /* flex默认值 */
  37.         /* 禁止放大 允许缩小 宽度自动 */
  38.         flex: 0 1 auto;
  40.         /* 允许放大与收缩 */
  41.         flex: 1 1 auto;
  42.         flex: auto;
  44.         /* 完全失去弹性(禁止放与收缩),PC端 */
  45.         flex: 0 0 auto;
  46.         flex: none;
  48.         /* 单值，仅表示是否允许放大 */
  49.         flex: 1;
  50.         flex: auto;
  51.       }
  52.       /* ----------------------------------------------------- */
  53.       /* 弹性布局的等比分配 */
  54.       .center .item:first-of-type {
  55.         flex: 1 1 auto;
  56.         /* 简写 */
  57.         flex: 1;
  58.       }
  59.       .center .item:first-of-type + * {
  60.         /* item2属性的宽度是item1和item2的两倍 */
  61.         flex: 2 1 auto;
  62.         /* 简写 */
  63.         flex: 2;
  64.       }
  65.       .ceneter .item:last-of-type {
  66.         flex: 1 1 auto;
  67.         /* 简写 */
  68.         flex: 1;
  69.       }
  70.     </style>
  71.   </head>
  72.   <body>
  73.     <div class="center">
  74.       <div class="item">item1</div>
  75.       <div class="item">item2</div>
  76.       <div class="item">item3</div>

2.单个项目在交叉轴上的对齐方式(align-self)

  1.  <style>
  2.       /* flex容器 */
  3.       .center {
  4.         display: flex;
  5.         height: 20rem;
  6.         border: #000 solid 1px;
  7.       }
  9.       /* 项目样式：必须是flex容器的子元素 */
  10.       .center .item {
  11.         width: 10rem;
  12.         background-color: lightcyan;
  13.         border: 1px solid #000;
  14.       }
  15.       /* 设置单个项目的垂直对齐方式 */
  16.       .center .item:nth-of-type(3) {
  17.         /* 顶端对齐 */
  18.         align-self: flex-start;
  19.         /* 底端对齐 */
  20.         align-self: flex-end;
  21.         /* 默认拉伸 */
  22.         align-self: stretch;
  23.         /* 居中对齐 */
  24.         align-self: center;
  25.       }
  26.       /* ----------------------------------------------------- */
  28.       /* flex项目支持定位，但不支持浮动 */
  29.       /* 先设置定位父级 */
  30.       .center {
  31.         position: relative;
  32.       }
  33.       /* 设置子元素定位 */
  34.       .center .item:nth-of-type(3) {
  35.         background-color: yellow;
  36.         position: absolute;
  37.       }
  38.     </style>
  39.   </head>
  40.   <body>
  41.     <div class="center">
  42.       <div class="item">item1</div>
  43.       <div class="item">item2</div>
  44.       <div class="item">item3</div>
  45.       <div class="item">item4</div>
  46.     </div>
  47.   </body>

3.项目在主轴上排列顺序(order)

  1. <style>
  2.       /* flex容器 */
  3.       .center {
  4.         display: flex;
  5.         height: 20rem;
  6.         border: #000 solid 1px;
  7.       }
  9.       /* 项目样式：必须是flex容器的子元素 */
  10.       .center .item {
  11.         width: 10rem;
  12.         background-color: lightcyan;
  13.         border: 1px solid #000;
  15.         /* 把所有项目的顺序都设置为0 */
  16.         order: 0;
  17.       }
  18.       /* 排列顺序是order的值谁小谁靠前，谁大谁靠后  */
  19.       .item.one {
  20.         background-color: #fff;
  21.         order: 5;
  22.       }
  23.       .item.two {
  24.         background-color: #ff7;
  25.         order: -1;
  26.       }
  27.       .item.three {
  28.         background-color: #9f7;
  29.       }
  30.       .item.four {
  31.         background-color: #897;
  32.       }
  33.     </style>
  34.   </head>
  35.   <body>
  36.     <div class="center">
  37.       <div class="item one">item1</div>
  38.       <div class="item two">item2</div>
  39.       <div class="item three">item3</div>
  40.       <div class="item four">item4</div>

5.仿写移动端京东首页

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>京东手机端布局</title>
  8.     <!-- <link rel="stylesheet" href="css/css Pre format.css" /> -->
  9.     <link rel="stylesheet" href="css/index.css" />
  10.     <link rel="stylesheet" href="icon-font/iconfont.css" />
  11.     <link rel="stylesheet" href="css/header.css" />
  12.     <link rel="stylesheet" href="css/footer.css" />
  13.     <link rel="stylesheet" href="css/nav.css" />
  14.     <style>
  15.       /* z-index==层级 保证总会显示在视口的最前面,一般在页眉和页脚*/
  16.       /* z-index: 100; */
  17.     </style>
  18.   </head>
  19.   <body>
  20.     <header>
  21.       <!-- 菜单 -->
  22.       <div class="menu iconfont icon-menu"></div>
  23.       <!-- 搜索框 -->
  24.       <div class="search">
  25.         <div class="jd">JD</div>
  26.         <div class="magnifier iconfont icon-search"></div>
  27.         <input type="text" class="text" value="显卡gtx系列" />
  28.       </div>
  29.       <!-- 登录 -->
  30.       <a href="" class="sign">登录</a>
  31.     </header>
  33.     <!-- 内容区 -->
  34.     <main>
  35.       <div class="banne">
  36.         <img src="images/bg/banner.jpg" alt="" />
  37.       </div>
  38.       <div class="nav">
  39.         <ul>
  40.           <li>
  41.             <a href=""><img src="images/dh/nav-1.png" alt="" /></a>
  42.             <a href="">京东超市</a>
  43.           </li>
  44.           <li>
  45.             <a href=""><img src="images/dh/nav-2.png" alt="" /></a>
  46.             <a href="">数码电器</a>
  47.           </li>
  48.           <li>
  49.             <a href=""><img src="images/dh/nav-3.png" alt="" /></a>
  50.             <a href="">京东服饰</a>
  51.           </li>
  52.           <li>
  53.             <a href=""><img src="images/dh/nav-4.png" alt="" /></a>
  54.             <a href="">京东生鲜</a>
  55.           </li>
  56.           <li>
  57.             <a href=""><img src="images/dh/nav-5.png" alt="" /></a>
  58.             <a href="">京东到家</a>
  59.           </li>
  60.           <li>
  61.             <a href=""><img src="images/dh/nav-6.png" alt="" /></a>
  62.             <a href="">充值缴费</a>
  63.           </li>
  64.           <li>
  65.             <a href=""><img src="images/dh/nav-7.png" alt="" /></a>
  66.             <a href="">9.9元拼</a>
  67.           </li>
  68.           <li>
  69.             <a href=""><img src="images/dh/nav-8.png" alt="" /></a>
  70.             <a href="">领劵</a>
  71.           </li>
  72.           <li>
  73.             <a href=""><img src="images/dh/nav-9.png" alt="" /></a>
  74.             <a href="">领金贴</a>
  75.           </li>
  76.           <li>
  77.             <a href=""><img src="images/dh/nav-10.png" alt="" /></a>
  78.             <a href="">PLUS会员</a>
  79.           </li>
  80.         </ul>
  81.       </div>
  82.       <!-- 秒杀区 -->
  83.       <div class="seckill">
  84.         <div class="list_1">
  85.           <ul>
  86.             <li><p>京东秒杀</p></li>
  87.             <li><p>20点专场</p></li>
  88.             <li><p>01:40:33</p></li>
  89.             <li><a href="">更多秒杀</a></li>
  90.           </ul>
  91.         </div>
  92.         <div class="list_2">
  93.           <ul>
  94.             <li>
  95.               <img src="images/ms/ms-1.jpg" alt="" />
  96.               <p class="iconfont icon-rmb">338</p>
  97.               <p class="iconfont icon-rmb">558</p>
  98.             </li>
  99.             <li>
  100.               <img src="images/ms/ms-2.jpg" alt="" />
  101.               <p class="iconfont icon-rmb">338</p>
  102.               <p class="iconfont icon-rmb">558</p>
  103.             </li>
  104.             <li>
  105.               <img src="images/ms/ms-3.jpg" alt="" />
  106.               <p class="iconfont icon-rmb">338</p>
  107.               <p class="iconfont icon-rmb">558</p>
  108.             </li>
  109.             <li>
  110.               <img src="images/ms/ms-4.jpg" alt="" />
  111.               <p class="iconfont icon-rmb">338</p>
  112.               <p class="iconfont icon-rmb">558</p>
  113.             </li>
  114.           </ul>
  115.         </div>
  116.       </div>
  117.       <!-- 推荐商品列表区 -->
  118.       <p class="cai">猜你喜欢</p>
  119.       <!-- <br /> -->
  120.       <div class="tj">
  121.         <div class="one">
  122.           <div>
  123.             <img src="images/sp/sp-1.webp" alt="" />
  124.             <p>商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍</p>
  125.           </div>
  126.           <div class="remarks">
  127.             <p class="iconfont icon-rmb">138</p>
  128.             <p>看相似</p>
  129.           </div>
  130.         </div>
  131.         <div class="two">
  132.           <div>
  133.             <img src="images/sp/sp-2.webp" alt="" />
  134.             <p>商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍</p>
  135.           </div>
  136.           <div class="remarks">
  137.             <p class="iconfont icon-rmb">203</p>
  138.             <p>看相似</p>
  139.           </div>
  140.         </div>
  141.         <div class="three">
  142.           <div>
  143.             <img src="images/sp/sp-3.webp" alt="" />
  144.             <p>商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍</p>
  145.           </div>
  146.           <div class="remarks">
  147.             <p class="iconfont icon-rmb">203</p>
  148.             <p>看相似</p>
  149.           </div>
  150.         </div>
  151.         <div class="four">
  152.           <div>
  153.             <img src="images/sp/sp-4.webp" alt="" />
  154.             <p>商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍</p>
  155.           </div>
  156.           <div class="remarks">
  157.             <p class="iconfont icon-rmb">203</p>
  158.             <p>看相似</p>
  159.           </div>
  160.         </div>
  161.         <div class="five">
  162.           <div>
  163.             <img src="images/sp/sp-5.webp" alt="" />
  164.             <p>商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍</p>
  165.           </div>
  166.           <div class="remarks">
  167.             <p class="iconfont icon-rmb">203</p>
  168.             <p>看相似</p>
  169.           </div>
  170.         </div>
  171.         <div class="six">
  172.           <div>
  173.             <img src="images/sp/sp-6.webp" alt="" />
  174.             <p>商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍</p>
  175.           </div>
  176.           <div class="remarks">
  177.             <p class="iconfont icon-rmb">203</p>
  178.             <p>看相似</p>
  179.           </div>
  180.         </div>
  181.         <div class="seven">
  182.           <div>
  183.             <img src="images/sp/sp-7.webp" alt="" />
  184.             <p>商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍</p>
  185.           </div>
  186.           <div class="remarks">
  187.             <p class="iconfont icon-rmb">203</p>
  188.             <p>看相似</p>
  189.           </div>
  190.         </div>
  191.         <div class="eight">
  192.           <div>
  193.             <img src="images/sp/sp-8.webp" alt="" />
  194.             <p>商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍</p>
  195.           </div>
  196.           <div class="remarks">
  197.             <p class="iconfont icon-rmb">203</p>
  198.             <p>看相似</p>
  199.           </div>
  200.         </div>
  201.         <p class="baseline">------我也是有底线的------</p>
  202.       </div>
  203.     </main>
  205.     <footer>
  206.       <div>
  207.         <div class="iconfont icon-home"></div>
  208.         <!-- <a href="">首页</a> -->
  209.         <p>首页</p>
  210.       </div>
  211.       <div>
  212.         <div class="iconfont icon-layers"></div>
  213.         <!-- <a href="">分类</a> -->
  214.         <p>分类</p>
  215.       </div>
  216.       <div>
  217.         <div class="iconfont icon-kehuguanli"></div>
  218.         <!-- <a href="">惊喜</a> -->
  219.         <p>惊喜</p>
  220.       </div>
  221.       <div>
  222.         <div class="iconfont icon-shopping-cart"></div>
  223.         <!-- <a href="">购物车</a> -->
  224.         <p>购物车</p>
  225.       </div>
  226.       <div>
  227.         <div class="iconfont icon-user"></div>
  228.         <!-- <a href="">未登录</a> -->
  229.         <p>未登录</p>
  230.       </div>
  231.     </footer>
  232.   </body>
  233. </html>

css Pre format.css

  1. /* css预格式化 */
  2. * {
  3.   padding: 0;
  4.   margin: 0;
  5.   box-sizing: border-box;
  6. }
  7. html {
  8.   font-size: 10px;
  9.   font-family: Microsoft YaHei;
  10. }
  11. body {
  12.   font-size: 1.6rem;
  13. }
  14. /* 去掉标签前面的小点 */
  15. li {
  16.   list-style: none;
  17. }
  18. /* 去掉a链接的下划线 */
  19. /* 给a链接一个灰色(默认蓝色太难看) */
  20. a {
  21.   text-decoration: none;
  22.   color: #7b7b7b;
  23. }
  24. /* 媒体查询，根据屏幕的宽度不同，从而选择不同的样式规则 */
  25. /* 当html到480px的时候 字体变为12px */
  26. @media screen and (min-width: 480px) {
  27.   html {
  28.     font-size: 12px;
  29.   }
  30. }
  31. /* 当html到640px的时候 字体变为14px */
  32. @media screen and (min-width: 640px) {
  33.   html {
  34.     font-size: 14px;
  35.   }
  36. }
  37. /* 当html到720px的时候 字体变为16px */
  38. @media screen and (min-width: 720px) {
  39.   html {
  40.     font-size: 16px;
  41.   }
  42. }

index.css

  1. @import url(css\ Pre\ format.css);
  3. /* 页眉 */
  4. header {
  5.   background-color: #e43130;
  6.   /* 1rem=10px */
  7.   height: 4.4rem;
  8.   position: fixed;
  9.   top: 0;
  10.   left: 0;
  11.   right: 0;
  12.   /* 优先层级为100 */
  13.   z-index: 100;
  14. }
  15. /* 内容 */
  16. main {
  17.   position: absolute;
  18.   background-color: #f6f6f6;
  19.   top: 4.4rem;
  20.   left: 0;
  21.   right: 0;
  22.   bottom: 4.4rem;
  23. }
  24. /* 页脚 */
  25. footer {
  26.   height: 4.4rem;
  27.   background-color: #fff;
  28.   border-top: solid 0.1rem #ccc;
  29.   position: fixed;
  30.   left: 0;
  31.   right: 0;
  32.   bottom: 0;
  33.   /* 优先层级为100 */
  34.   z-index: 100;
  35. }

header.css

  1. header {
  2.   display: flex;
  3.   align-items: center;
  4. }
  5. header .menu {
  6.   flex: 1;
  7. }
  8. header .search {
  9.   flex: 6;
  10. }
  11. header .sign {
  12.   flex: 1;
  13. }
  15. /* 菜单区 */
  16. .banne {
  17.   display: flex;
  18.   justify-content: center;
  19.   padding: 1rem 0;
  20.   height: 22vh;
  21.   background: linear-gradient(red, #fff);
  22. }
  23. .banne img {
  24.   border-radius: 1rem;
  25. }
  26. header .menu {
  27.   text-align: center;
  28.   font-size: 2.5rem;
  29.   color: #fff;
  30. }
  32. .search {
  33.   background-color: #fff;
  34.   display: flex;
  35.   /* justify-items: center; */
  36.   align-items: center;
  37.   padding: 0.2rem;
  38.   border-radius: 3rem;
  39. }
  41. .search .jd {
  42.   color: #e43130;
  43.   font-size: 2rem;
  44.   flex: 0 1 3rem;
  45.   margin-left: 1rem;
  46. }
  47. .search .magnifier {
  48.   font-size: 1.5rem;
  49.   color: #ccc;
  50.   border-left: 1px solid;
  51.   padding-left: 1rem;
  52.   flex: 0 1 4rem;
  53. }
  54. .search .text {
  55.   border: none;
  56.   background-color: #fff;
  57.   color: #ccc;
  58. }
  60. .sign {
  61.   color: #fff;
  62.   display: flex;
  63.   justify-content: center;
  64.   align-items: center;
  65. }

nav.css

  1. /* nav */
  2. .nav {
  3.   margin-bottom: 1rem;
  4. }
  5. .nav ul li img {
  6.   height: 4rem;
  7.   width: 4rem;
  8. }
  9. main .nav ul {
  10.   padding: 1rem;
  11.   display: flex;
  12.   /* row wrap 主轴水平,换行 */
  13.   flex-flow: row wrap;
  14. }
  15. .nav ul li a:last-of-type {
  16.   font-size: 1.5rem;
  17. }
  18. main .nav ul li {
  19.   display: flex;
  20.   flex: 1 1 20%;
  21.   /* column nowrap 主轴垂直,不换行 */
  22.   flex-flow: column nowrap;
  23.   align-items: center;
  24. }
  26. /* <!-- 秒杀区 --> */
  27. .seckill {
  28.   background-color: #fff;
  29. }
  30. .list_1 ul {
  31.   padding: 1rem;
  32.   display: flex;
  33.   align-items: center;
  34. }
  35. .list_1 ul li:nth-of-type(2) {
  36.   padding: 0.2rem 0.5rem;
  37.   color: #fff;
  38.   font-size: 1.2rem;
  39.   background-color: red;
  40.   border-radius: 2rem;
  41.   z-index: 99;
  42. }
  43. .list_1 ul li:nth-of-type(3) {
  44.   position: relative;
  45.   left: -1rem;
  46.   padding-left: 1rem;
  47.   font-size: 1.2rem;
  48.   border-radius: 2rem;
  49.   border: 1px red solid;
  50. }
  51. .list_1 ul li:last-of-type {
  52.   position: absolute;
  53.   padding-right: 1rem;
  54.   font-size: 1.2rem;
  55.   right: 0rem;
  56.   color: red;
  57. }
  58. .list_1 ul li a {
  59.   color: red;
  60. }
  62. .list_2 ul {
  63.   display: flex;
  64.   justify-content: center;
  65. }
  66. .list_2 ul li {
  67.   display: flex;
  68.   flex-flow: column nowrap;
  69. }
  70. .list_2 img {
  71.   width: 25vw;
  72. }
  73. .list_2 ul li p {
  74.   text-align: center;
  75. }
  76. .list_2 ul li p:first-of-type {
  77.   color: red;
  78.   font-size: 1.8rem;
  79. }
  80. .list_2 ul li p:last-of-type {
  81.   color: #666;
  82.   /* 给文字设置删除线 */
  83.   text-decoration-line: line-through;
  84. }
  86. /* <!-- 推荐商品列表区 --> */
  87. .cai {
  88.   padding-top: 1rem;
  89.   text-align: center;
  90.   font-size: 2rem;
  91.   color: #666;
  92. }
  93. .tj {
  94.   display: flex;
  95.   flex-flow: row wrap;
  96.   justify-content: space-evenly;
  97.   background-color: #f6f6f6;
  98.   margin-bottom: 10vh;
  99. }
  100. .tj > div {
  101.   background-color: #fff;
  102.   border-radius: 1rem;
  103.   display: flex;
  104.   flex-flow: column nowrap;
  105.   flex: 0 1 45vw;
  106.   margin-top: 1rem;
  107. }
  108. .tj div img {
  109.   width: 45vw;
  110.   padding: 1rem;
  111. }
  113. .tj div p {
  114.   font-size: 1.2rem;
  115.   padding: 0 1rem;
  116.   color: #666;
  117. }
  118. .tj div:last-of-type {
  119.   display: flex;
  120.   justify-content: space-between;
  121.   margin: 0.5rem 0;
  122. }
  123. .tj div .remarks p:first-of-type {
  124.   font-size: 1.7rem;
  125.   color: red;
  126. }
  127. .tj div .remarks p:last-of-type {
  128.   background-color: #f6f6f6;
  129.   border-radius: 3rem;
  130. }
  131. .baseline {
  132.   margin: 1rem 0;
  133.   font-size: 1.2rem;
  134.   color: #999;
  135. }
  1. footer {
  2.   display: flex;
  3.   /* 设置分散对齐 */
  4.   justify-content: space-around;
  5. }
  6. /* flex支持嵌套布局 */
  7. /* flex的项目可以又是一个flex容器 */
  8. footer > div {
  9.   display: flex;
  10.   /* 水平居中 */
  11.   justify-content: center;
  12.   /* 垂直居中 */
  13.   align-items: center;
  14.   /* 设置排列方式 */
  15.   flex-flow: column nowrap;
  16. }
  17. /* 给icon图标设置大小 */
  18. footer div .iconfont {
  19.   font-size: 2rem;
  20. }
  21. /* 设置字体大小 */
  22. footer div p {
  23.   font-size: 1rem;
  24. }

最终效果

批改老师：天蓬老师天蓬老师

批改状态：合格

老师批语：
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

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

  • PHP学习

  • 技术支持

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