search

博客列表 >flex弹性盒模型常用项目属性及仿写移动端京东首页

flex弹性盒模型常用项目属性及仿写移动端京东首页

Tyrrell
Tyrrell原创
2021年03月31日 10:46:42627浏览

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. }

最终效果

上一条：CSS-02盒模型下一条：【归纳】CSS实现单行和多行文本溢出显示省略号（…）的方法
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多