flex项目的三大基本属性

基本属性属性说明属性值值说明
flex项目的缩放比例与基准宽度0 1 auto / initial默认,禁止放大,允许收缩,宽度自动
1 1 auto / auto允许放大和收缩
0 0 auto / none禁止放大和收缩/PC布局
align-self单个项目在交叉轴上的对齐方式stretch默认,拉伸
flex-start起始线
flex-end终止线
center居中
order项目在主轴上排列顺序不写显示顺序:默认按书写的源码顺序排列
【数字】序号越小越靠前,越大越靠后，可以为负值

示例

flex" class="reference-link">项目的缩放比例与基准宽度flex

0 0 10rem与1 0 10rem,同基准下允许放大对比
放大

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>flex项目属性</title>
  9.     <style>
  10.         main {
  11.             display: flex;
  12.             height: 10rem;
  13.             flex-flow: row nowrap;
  14.         }
  15.         main div,.cols div {
  16.             background-color: lightblue;
  17.             border: 1px solid #0C0C0C;
  18.         }
  19.         main div{
  20.             flex:0 0 10rem;
  21.         }
  23.         .cols {
  24.             display: flex;
  25.             height: 10rem;
  26.             flex-flow: row nowrap;
  27.         }
  28.         .cols div {
  29.             flex:1 0 10rem;
  30.         }
  33.     </style>
  34. </head>
  36. <body>
  37. <main>
  38.     <div>item1</div>
  39.     <div>item2</div>
  40.     <div>item3</div>
  41.     <div>item4</div>
  42. </main>
  43. <div class="cols">
  44.     <div>colm1</div>
  45.     <div>colm2</div>
  46.     <div>colm3</div>
  47.     <div>colm4</div>
  48. </div>
  49. </body>
  51. </html>

1 0 10rem与1 1 10rem,同基准下允许收缩对比
收缩

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>flex项目属性</title>
  9.     <style>
  10.         main {
  11.             display: flex;
  12.             height: 10rem;
  13.             flex-flow: row nowrap;
  14.         }
  15.         main div,.cols div {
  16.             background-color: lightblue;
  17.             border: 1px solid #0C0C0C;
  18.         }
  19.         main div{
  20.             flex:1 0 10rem;
  21.         }
  23.         .cols {
  24.             display: flex;
  25.             height: 10rem;
  26.             flex-flow: row nowrap;
  27.         }
  28.         .cols div {
  29.             flex:1 1 10rem;
  30.         }
  33.     </style>
  34. </head>
  36. <body>
  37. <main>
  38.     <div>item1</div>
  39.     <div>item2</div>
  40.     <div>item3</div>
  41.     <div>item4</div>
  42. </main>
  43. <div class="cols">
  44.     <div>colm1</div>
  45.     <div>colm2</div>
  46.     <div>colm3</div>
  47.     <div>colm4</div>
  48. </div>
  49. </body>
  51. </html>

按比例伸缩

项目占比为fiex的值*1/1+2+3+4
比例伸缩

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>flex项目属性</title>
  9.     <style>
  10.         main {
  11.             display: flex;
  12.             height: 10rem;
  13.             flex-flow: row nowrap;
  14.         }
  15.         main div {
  16.             background-color: lightblue;
  17.             border: 1px solid #0C0C0C;
  18.         }
  19.         main div:nth-of-type(1) {
  20.             flex: 1;
  21.         }
  22.         main div:nth-of-type(2) {
  23.             flex: 2;
  24.         }
  25.         main div:nth-of-type(3) {
  26.             flex: 3;
  27.         }
  28.         main div:nth-of-type(4) {
  29.             flex: 4;
  30.         }
  32.     </style>
  33. </head>
  35. <body>
  36. <main>
  37.     <div>item1</div>
  38.     <div>item2</div>
  39.     <div>item3</div>
  40.     <div>item4</div>
  41. </main>
  43. </body>
  45. </html>
align-self" class="reference-link">单个项目在交叉轴上的对齐方式align-self

align-self

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>flex项目属性</title>
  9.     <style>
  10.         main {
  11.             display: flex;
  12.             height: 20rem;
  13.             width: 40rem;
  14.             flex-flow: row nowrap;
  15.             /*align-items: center;*/
  16.         }
  18.         main div {
  19.             background-color: lightblue;
  21.         }
  23.         main :nth-of-type(1) {
  24.             align-self: stretch;
  25.         }
  27.         main :nth-of-type(2) {
  28.             align-self: flex-start;
  29.         }
  31.         main :nth-of-type(3) {
  32.             align-self: center;
  33.         }
  35.         main :nth-of-type(4) {
  36.             align-self: flex-end;
  37.         }
  38.     </style>
  39. </head>
  41. <body>
  42. <main>
  43.     <div>item1</div>
  44.     <div>item2</div>
  45.     <div>item3</div>
  46.     <div>item4</div>
  47.     <div>item5</div>
  48.     <div>item6</div>
  49.     <div>item7</div>
  50.     <div>item8</div>
  51.     <div>item9</div>
  52.     <div>item10</div>
  53.     <div>item11</div>
  54.     <div>item12</div>
  56. </main>
  57. </body>
  59. </html>
order" class="reference-link">项目在主轴上排列顺序order

order

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>flex项目属性</title>
  9.     <style>
  10.         main {
  11.             display: flex;
  12.             height: 10rem;
  13.             width: 40rem;
  14.             flex-flow: row nowrap;
  15.             /*align-items: center;*/
  16.         }
  17.         .order {
  18.             display: flex;
  19.             height: 10rem;
  20.             width: 40rem;
  21.             flex-flow: row nowrap;
  22.         }
  23.         main div {
  24.             background-color: lightblue;
  25.             border: 1px solid #0C0C0C;
  26.         }
  27.         .order div {
  28.             background-color: lightgrey;
  29.             border: 1px solid #0C0C0C;
  30.         }
  31.         .order div:nth-of-type(2) {
  32.             order: 100;
  33.         }
  34.         .order div:nth-of-type(4) {
  35.             order: -1;
  36.         }
  37.     </style>
  38. </head>
  40. <body>
  41. <main>
  42.     <div>item1</div>
  43.     <div>item2</div>
  44.     <div>item3</div>
  45.     <div>item4</div>
  46. </main>
  47. <div class="order">
  48.     <div>order1</div>
  49.     <div>order2</div>
  50.     <div>order3</div>
  51.     <div>order4</div>
  52. </div>
  53. </body>
  55. </html>

移动商城首页的页眉和页脚的布局

JD

index.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <link rel="stylesheet" href="static/css/index.css">
  9.     <link rel="stylesheet" href="static/icon-font/iconfont.css">
  10.     <link rel="stylesheet" href="static/css/header.css">
  11.     <link rel="stylesheet" href="static/css/seckill.css">
  12.     <link rel="stylesheet" href="static/css/footer.css">
  13.     <link rel="stylesheet" href="static/css/nav.css">
  14.     <link rel="stylesheet" href="static/css/love.css">
  16.     <title>首页</title>
  17. </head>
  19. <body>
  20.     <!-- 页眉 -->
  21.     <header class="header">
  22.         <div class="menu iconfont icon-menu"></div>
  23.         <div class="search">
  24.             <div class="logo">JD</div>
  25.             <div class="iconfont icon-search"></div>
  26.             <input class="words" type="text" value="php11">
  27.         </div>
  28.         <div class="login">登录</div>
  29.     </header>
  30.     <!-- 主体 -->
  31.     <main class="main">
  32.         <!-- 导航 -->
  33.         <ul class="nav">
  34.             <!-- 第一组 -->
  35.             <li>
  36.                 <a href=""><img src="static/images/dh/nav-1.png" alt="" /></a>
  37.                 <a href="">京东超市</a>
  38.             </li>
  39.             <li>
  40.                 <a href=""><img src="static/images/dh/nav-2.png" alt="" /></a>
  41.                 <a href="">数码电器</a>
  42.             </li>
  43.             <li>
  44.                 <a href=""><img src="static/images/dh/nav-3.png" alt="" /></a>
  45.                 <a href="">京东服饰</a>
  46.             </li>
  47.             <li>
  48.                 <a href=""><img src="static/images/dh/nav-4.png" alt="" /></a>
  49.                 <a href="">京东生鲜</a>
  50.             </li>
  51.             <li>
  52.                 <a href=""><img src="static/images/dh/nav-5.png" alt="" /></a>
  53.                 <a href="">京东到家</a>
  54.             </li>
  55.             <!-- 第二组 -->
  56.             <li>
  57.                 <a href=""><img src="static/images/dh/nav-6.png" alt="" /></a>
  58.                 <a href="">充值缴费</a>
  59.             </li>
  60.             <li>
  61.                 <a href=""><img src="static/images/dh/nav-7.png" alt="" /></a>
  62.                 <a href="">9.9元拼</a>
  63.             </li>
  64.             <li>
  65.                 <a href=""><img src="static/images/dh/nav-8.png" alt="" /></a>
  66.                 <a href="">领券</a>
  67.             </li>
  68.             <li>
  69.                 <a href=""><img src="static/images/dh/nav-9.png" alt="" /></a>
  70.                 <a href="">领金贴</a>
  71.             </li>
  72.             <li>
  73.                 <a href=""><img src="static/images/dh/nav-10.png" alt="" /></a>
  74.                 <a href="">PLUS会员</a>
  75.             </li>
  76.         </ul>
  78.         <!-- 秒杀区 -->
  79.         <div class="seckill">
  80.             <!-- 头部 -->
  81.             <div class="seckill-top">
  82.                 <div class="left">
  83.                     <div class="title">京东秒杀</div>
  84.                     <div class="notice">
  85.                         <div class="tips">23点专场</div>
  86.                         <div class="time">22:11:22</div>
  87.                     </div>
  88.                 </div>
  89.                 <div class="right">更多秒杀</div>
  90.             </div>
  92.             <!-- 秒杀主体区 -->
  93.             <ul class="seckill-body">
  94.                 <li class="item">
  95.                     <a href=""><img src="static/images/ms/ms-1.jpg" alt="" /></a>
  96.                     <div class="iconfont icon-rmb">338</div>
  97.                     <div class="iconfont icon-rmb">558</div>
  98.                 </li>
  99.                 <li class="item">
  100.                     <a href=""><img src="static/images/ms/ms-2.jpg" alt="" /></a>
  101.                     <div class="iconfont icon-rmb">3456</div>
  102.                     <div class="iconfont icon-rmb">4567</div>
  103.                 </li>
  104.                 <li class="item">
  105.                     <a href=""><img src="static/images/ms/ms-3.jpg" alt="" /></a>
  106.                     <div class="iconfont icon-rmb">789</div>
  107.                     <div class="iconfont icon-rmb">999</div>
  108.                 </li>
  109.                 <li class="item">
  110.                     <a href=""><img src="static/images/ms/ms-4.jpg" alt="" /></a>
  111.                     <div class="iconfont icon-rmb">3213</div>
  112.                     <div class="iconfont icon-rmb">4532</div>
  113.                 </li>
  114.             </ul>
  115.         </div>
  116.         <!-- 推荐区 -->
  117.         <h2 class="title">猜你喜欢</h2>
  118.         <ul class="love">
  119.             <li class="item">
  120.                 <a href=""><img src="static/images/sp/sp-1.webp" alt="" /></a>
  121.                 <p>商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介品介绍商品介绍</p>
  122.                 <div class="price">
  123.                     <div class="iconfont icon-rmb">203</div>
  124.                     <div>看相似</div>
  125.                 </div>
  126.             </li>
  127.             <li class="item">
  128.                 <a href=""><img src="static/images/sp/sp-2.webp" alt="" /></a>
  129.                 <p>商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介品介绍商品介绍</p>
  130.                 <div class="price">
  131.                     <div class="iconfont icon-rmb">203</div>
  132.                     <div>看相似</div>
  133.                 </div>
  134.             </li>
  135.             <li class="item">
  136.                 <a href=""><img src="static/images/sp/sp-3.webp" alt="" /></a>
  137.                 <p>商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介品介绍商品介绍</p>
  138.                 <div class="price">
  139.                     <div class="iconfont icon-rmb">203</div>
  140.                     <div>看相似</div>
  141.                 </div>
  142.             </li>
  143.             <li class="item">
  144.                 <a href=""><img src="static/images/sp/sp-4.webp" alt="" /></a>
  145.                 <p>商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介品介绍商品介绍</p>
  146.                 <div class="price">
  147.                     <div class="iconfont icon-rmb">203</div>
  148.                     <div>看相似</div>
  149.                 </div>
  150.             </li>
  151.             <li class="item">
  152.                 <a href=""><img src="static/images/sp/sp-5.webp" alt="" /></a>
  153.                 <p>商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介品介绍商品介绍</p>
  154.                 <div class="price">
  155.                     <div class="iconfont icon-rmb">203</div>
  156.                     <div>看相似</div>
  157.                 </div>
  158.             </li>
  159.             <li class="item">
  160.                 <a href=""><img src="static/images/sp/sp-6.webp" alt="" /></a>
  161.                 <p>商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介品介绍商品介绍</p>
  162.                 <div class="price">
  163.                     <div class="iconfont icon-rmb">203</div>
  164.                     <div>看相似</div>
  165.                 </div>
  166.             </li>
  167.         </ul>
  168.     </main>
  169.     <!-- 页脚 -->
  170.     <footer class="footer">
  172.         <div>
  173.             <div class="iconfont icon-home"></div>
  174.             <span>主页</span>
  175.         </div>
  176.         <div>
  177.             <div class="iconfont icon-layers"></div>
  178.             <span>分类</span>
  179.         </div>
  180.         <div>
  181.             <div class="iconfont icon-kehuguanli"></div>
  182.             <span>京喜</span>
  183.         </div>
  184.         <div>
  185.             <div class="iconfont icon-shopping-cart"></div>
  186.             <span>购物车</span>
  187.         </div>
  188.         <div>
  189.             <div class="iconfont icon-user"></div>
  190.             <span>未登录</span>
  191.         </div>
  193.     </footer>
  194. </body>
  196. </html>
reset.css
  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4.   box-sizing: border-box;
  5. }
  7. li {
  8.   list-style: none;
  9. }
  11. a {
  12.   text-decoration: none;
  13.   color: #7b7b7b;
  14. }
  16. :root {
  17.   font-size: 10px;
  18. }
  19. body {
  20.   color: aliceblue;
  21. }
  22. @media screen and (min-width: 480px) {
  23.   :root {
  24.     font-size: 12px;
  25.   }
  26. }
  27. @media screen and (min-width: 640px) {
  28.   :root {
  29.     font-size: 14px;
  30.   }
  31. }
  32. @media screen and (min-width: 720px) {
  33.   :root {
  34.     font-size: 16px;
  35.   }
  36. }
index.css
  1. @import url(reset.css);
  3. header {
  4.   position: fixed;
  5.   height: 4.4rem;
  6.   left: 0;
  7.   top: 0;
  8.   right: 0;
  9.   background-color: #e43130;
  10.   z-index: 100;
  11. }
  12. main {
  13.   position: absolute;
  14.   left: 0;
  15.   right: 0;
  16.   top: 4.4rem;
  17.   bottom: 4.4rem;
  18. }
  20. footer {
  21.   position: fixed;
  22.   height: 4.4rem;
  23.   left: 0;
  24.   right: 0;
  25.   bottom: 0;
  26.   background-color: #ffffff;
  27.   z-index: 100;
  28. }
header.css
  1. .header {
  2.   display: flex;
  3.   flex-flow: row nowrap;
  4.   align-items: center;
  5. }
  6. .header .menu {
  7.   flex: 1;
  8.   color: #ffecec;
  9.   text-align: center;
  10.   font-size: 2.5rem;
  11. }
  13. .header .login {
  14.   flex: 1;
  15.   color: #ffecec;
  16.   text-align: center;
  17.   font-size: 2rem;
  18. }
  19. .header .search {
  20.   flex: 6;
  21.   padding: 0.5rem;
  22.   display: flex;
  23.   align-items: center;
  24.   background-color: #ffffff;
  25.   border-radius: 3rem;
  26. }
  27. .header .search .logo {
  28.   flex: 0 1 4rem;
  29.   color: #e43130;
  30.   font-size: 2rem;
  31.   line-height: 2rem;
  32.   text-align: center;
  33. }
  34. .header .search .icon-search {
  35.   flex: 0 1 4rem;
  36.   color: #7b7b7b;
  37.   border-left: 1px solid #7b7b7b;
  38.   line-height: 2rem;
  39.   text-align: center;
  40. }
  41. .header .search :last-child {
  42.   flex: auto;
  43.   color: #7b7b7b;
  44.   border: none;
  45.   outline: none;
  46. }
  1. .footer {
  2.   color: rgb(119, 119, 119);
  3.   display: flex;
  4.   justify-content: space-around;
  5.   align-items: center;
  6. }
  8. .footer div {
  9.   display: flex;
  10.   flex-flow: column wrap;
  11.   justify-content: center;
  12.   align-items: center;
  13.   font-size: 2rem;
  14. }
  15. .footer div span {
  16.   font-size: 1rem;
  17. }
  18. .footer div:hover {
  19.   cursor: pointer;
  20. }
nav.css
  1. .main .nav {
  2.   display: flex;
  3.   flex-flow: row wrap;
  4.   justify-content: space-around;
  6.   align-items: center;
  7. }
  9. main .nav li {
  10.   flex: 1 1 20%;
  11.   padding: 0.5rem;
  12.   display: flex;
  13.   flex-flow: column wrap;
  14.   justify-content: center;
  15.   align-items: center;
  16. }
  18. main .nav li a img {
  19.   height: 4rem;
  20. }
seckill.css
  1. .main {
  2.   background-color: #f6f6f6;
  3. }
  5. .main .seckill {
  6.   display: flex;
  7.   flex-flow: column;
  8.   background-color: #fff;
  9.   border-radius: 1rem;
  10.   margin: 1rem;
  11. }
  12. .main .seckill .seckill-top {
  13.   display: flex;
  14.   flex-flow: row nowrap;
  15.   justify-content: space-between;
  16.   padding: 0.5rem;
  17. }
  18. .main .seckill .seckill-top .left {
  19.   display: flex;
  20. }
  21. .main .seckill .seckill-top .left .title {
  22.   font-size: 1.5rem;
  23.   color: #979797;
  24. }
  25. .main .seckill .seckill-top .left .notice {
  26.   display: flex;
  27.   font-size: 1.2rem;
  28.   color: #e43130;
  29. }
  31. .main .seckill .seckill-top .right {
  32.   font-size: 1.2rem;
  33.   color: #979797;
  34. }
  35. .main .seckill .seckill-body {
  36.   display: flex;
  37.   justify-content: space-between;
  38. }
  40. .main .seckill .seckill-body .item {
  41.   display: flex;
  42.   flex-flow: column wrap;
  43.   justify-content: center;
  44.   align-items: center;
  45. }
  46. .main .seckill .seckill-body .item img {
  47.   height: 8rem;
  48.   width: 8rem;
  49. }
  50. .main .seckill .seckill-body .item > :nth-child(2) {
  51.   color: #e43130;
  52.   font-size: small;
  53. }
  54. .main .seckill .seckill-body .item > :last-child {
  55.   color: #979797;
  56.   font-size: small;
  57.   text-decoration: line-through;
  58. }
love.css
  1. .main > h2 {
  2.   color: #777;
  3.   text-align: center;
  4.   font-size: 2rem;
  5.   height: 3rem;
  6.   line-height: 3rem;
  7. }
  8. .main .love {
  9.   font-size: 1rem;
  10.   display: flex;
  11.   flex-flow: row wrap;
  12.   justify-content: space-between;
  13. }
  15. .main .love .item {
  16.   flex: 1 0 calc(50% - 2rem);
  17.   background-color: #fff;
  18.   overflow: hidden;
  19.   display: flex;
  20.   flex-flow: column wrap;
  21.   margin-left: 1rem;
  22.   margin-bottom: 1rem;
  23.   border-radius: 1rem;
  24.   padding-bottom: 1rem;
  25.   padding: 1rem;
  26.   color: #777;
  27. }
  28. .main .love .item img {
  29.   width: 100%;
  30.   height: 100%;
  31. }
  33. .main .love .item .price {
  34.   display: flex;
  35.   justify-content: space-between;
  36.   align-items: center;
  37. }
  39. .main .love .item .price div:first-of-type {
  40.   color: #e43130;
  41.   padding: 0.2rem 1rem;
  42. }
  44. .main .love .item .price div:last-of-type {
  45.   color: #666;
  46.   background-color: #979797;
  47.   border-radius: 1rem;
  48.   padding: 0.2rem 1rem;
  49. }

更多相关文章

  1. 仿写京东商城
  2. 商品详情页要做好的三件事
  3. VRRP技术技术介绍及华为资料分享！
  4. Docker基本组件、概念介绍
  5. 介绍几种常见的作图软件
  6. flea-frame-db使用之JPA封装介绍
  7. haploview使用介绍
  8. 在Digilent Nexys Video板卡上实现HDMI I/O视频处理系统之软件配
  9. thinkphp6的Service的简明使用介绍

随机推荐

  1. 《Android取证实战：调查、分析与移动安全
  2. Android(安卓)Retrofit OkHttp添加Interc
  3. Android源码 半小时下完Android系统源码
  4. [转]快速切换Android工程版本的方法
  5. [原创]Android在eclipse下出现Failed to
  6. android 8.0 Notification 的处理
  7. android进程创建分析
  8. [转]有关Android线程的学习
  9. Android 内存浅析【管理、机制、分析】
  10. Android双向选择控件DoubleSeekBar使用详