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

最终效果

更多相关文章

  1. Hadoop 3.0磁盘均衡器(diskbalancer)功能及使用介绍
  2. 1.flex项目上的三个属性、2。移动商城
  3. HBase基础 | 图数据库HGraphDB介绍
  4. 什么是整型类型？Python整型详细介绍
  5. 介绍B树索引
  6. 淘宝首页flex仿写
  7. 推荐系统：石器与青铜时代
  8. 京东手机端页面实战
  9. JD布局学习

随机推荐

  1. android 笔记 --- Android应用程序的权限
  2. 手动更新 Android SDK
  3. android adb命令 抓取系统各种 log
  4. android字体加粗的方法
  5. android studio ndk 开发以及问题
  6. Your CPU does not support required fea
  7. Android ProgressBar 各种样式大全
  8. android 中xml文件中出现 Attr.value mis
  9. android 自定义控件属性
  10. 对android的android:taskAffinity初识