flex弹性盒模型

flex 属性众多,记住以下几个就够用了,尽可能使用简写

1. 术语

  1. 容器: 具有display:flex属性元素
  2. 项目: flex 容器的”子元素”
  3. 主轴: 项目排列的轴线
  4. 交叉轴: 与主轴垂直的轴线

2. 容器属性

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

3. 项目属性

序号属性描述
1flex项目的缩放比例与基准宽度
3align-self单个项目在交叉轴上的对齐方式
4order项目在主轴上排列顺序
  • flex项目属性
  1.         /* flex: flex-grow flex-shrink flex-basis */
  2.         /* flex: 放大因子 收缩因子 项目在主轴上的基准宽度 */
  3.         /* flex-basis: 项目占据的主轴宽度,优先级大于width,小于min-width */
  4.         /* 默认值,禁止放大,但允许自动收缩,项目宽度自动计算 */
  6.         flex: 0 1 auto;
  7.         /* 默认值使用关键字简写 */
  8.         flex: initial;
  10.         /* 允许放大和收缩 */
  11.         flex: 1 1 auto;
  12.         /* 简写 */
  13.         flex: auto;
  16.         /* 禁止放大和收缩 */
  17.         flex: 0 0 auto;
  18.         /* 简写 */
  19.         flex: none;
  22.         /* 如果只有一个数字,省掉后面二个参数,表示的放大因子 */
  23.         flex: 1;
  24.         /* 等于  flex: 1 1 auto; */
  26.           /* flex通常不会用来设置所有项目的默认选项,通常用来设置某一个项目的特征 */
  1. /* 写一个案例,要求第2个,第3个项目的宽度是第1个和第四个2倍 */
  2.       /* 选择第一个和第四个项目 */
  3.       .container > .item:first-of-type,
  4.       .container > .item:last-of-type {
  5.         flex: 1;
  6.       }
  8.       /* 选择第二个和第三个项目 */
  9.       .container > .item:nth-of-type(2),
  10.       .container > .item:nth-of-type(2) + * {
  11.         flex: 2;
  12.       }

  • align-self属性 单个项目在交叉轴上的对齐方式
  1.     /* 例如设置第2个项目与其它项目的对齐方式不一样 */
  2.       .container > .item:nth-of-type(2) {
  3.         align-self: stretch;
  4.         align-self: flex-start;
  5.         align-self: flex-end;
  6.         align-self: center;
  7.       }

  • order属性 项目在主轴上排列顺序 
  1.         /* 显示顺序:默认按书写的源码顺序排列 */
  2.       /* 默认序号越小越靠前,越大越靠后 */
  3.       .container > .item:first-of-type {
  4.         order: 1;
  5.         order: 5;
  6.         background-color: yellow;
  7.       }
  9.       .container > .item:nth-of-type(2) {
  10.         order: 2;
  11.         background-color: lightgreen;
  12.       }
  14.       .container > .item:nth-of-type(3) {
  15.         order: 3;
  16.         order: 0;
  17.       }
  19.       .container > .item:last-of-type {
  20.         order: 4;
  21.         /* 支持负值 */
  22.         order: -1;
  23.         background-color: #ccc;
  24.       }

4.移动端京东首页

项目结构

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>移动端京东首页</title>
  8.     <link rel="stylesheet" href="static/css/header.css">
  9.     <link rel="stylesheet" href="static/css/footer.css">
  10.     <link rel="stylesheet" href="static/css/nav.css">
  11.     <link rel="stylesheet" href="static/css/banner.css">
  12.     <link rel="stylesheet" href="static/css/tj.css">
  14.     <link rel="stylesheet" href="static/css/index.css">
  15.     <!-- 引入字体图标 -->
  16.     <link rel="stylesheet" href="static/icon-font/iconfont.css">
  17. </head>
  19. <body>
  20.     <!-- 页眉头部 -->
  21.     <div class="header">
  22.         <!-- 菜单 -->
  23.         <div class="menu iconfont icon-menu"></div>
  24.         <!-- 搜索框 -->
  25.         <div class="search">
  26.             <div class="logo">JD</div>
  27.             <div class="zoom ">
  28.                 <span class="iconfont icon-search"></span>
  29.             </div>
  30.             <input type="text" class="words" value="移动硬盘500G">
  31.         </div>
  32.         <!-- 登录按钮 -->
  33.         <a href="http://" target="_blank" class="login">登录</a>
  34.     </div>
  37.     <!-- 主体 -->
  38.     <div class="main">
  39.         <!-- 轮播图 -->
  41.         <!-- banner区 -->
  42.         <div class="banner">
  43.             <a href="https://pro.m.jd.com/mall/active/2d4Hw2SqrLkZ6K8wzqZJN2AoJWGA/index.html">
  44.                 <img src="https://m.360buyimg.com/mobilecms/s250x200_jfs/t1/171298/2/14126/63148/60585644Eca26db11/58967bace7177cb5.jpg!q70.jpg.dpg" alt="">
  45.             </a>
  46.             <a href="https://pro.m.jd.com/mall/active/3wpbRPaYiHTigHCyrGVDQKwy69NG/index.html">
  47.                 <img src="https://m.360buyimg.com/mobilecms/s250x200_jfs/t1/166211/4/14279/77377/605be5adEc517f1fa/1514376c9619dbcc.jpg!q70.jpg.dpg" alt="">
  48.             </a>
  49.             <a href="https://pro.m.jd.com/mall/active/bXhWtPcq4Vh9LHDzPyz1uyjyjyi/index.html?babelChannel=ttt3">
  50.                 <img src="https://m.360buyimg.com/mobilecms/s250x200_jfs/t1/140456/37/16741/69120/60585711E4cff0446/fb6f80ac35fb36da.jpg!q70.jpg.dpg" alt="">
  51.             </a>
  52.         </div>
  53.         <!-- 主导航区 -->
  54.         <ul class="nav">
  55.             <li>
  56.                 <a href="#">
  57.                     <img src="static/img/dh/nav-1.png" alt="">
  58.                     <span>京东超市</span>
  59.                 </a>
  60.             </li>
  61.             <li>
  62.                 <a href="#">
  63.                     <img src="static/img/dh/nav-2.png" alt="">
  64.                     <span>数码电器</span>
  65.                 </a>
  66.             </li>
  67.             <li>
  68.                 <a href="#">
  69.                     <img src="static/img/dh/nav-3.png" alt="">
  70.                     <span>京东服饰</span>
  71.                 </a>
  72.             </li>
  73.             <li>
  74.                 <a href="#">
  75.                     <img src="static/img/dh/nav-4.png" alt="">
  76.                     <span>京东生鲜</span>
  77.                 </a>
  78.             </li>
  79.             <li>
  80.                 <a href="#">
  81.                     <img src="static/img/dh/nav-5.png" alt="">
  82.                     <span>京东到家</span>
  83.                 </a>
  84.             </li>
  85.             <li>
  86.                 <a href="#">
  87.                     <img src="static/img/dh/nav-6.png" alt="">
  88.                     <span>充值缴费</span>
  89.                 </a>
  90.             </li>
  91.             <li>
  92.                 <a href="#">
  93.                     <img src="static/img/dh/nav-7.png" alt="">
  94.                     <span>9.9元拼</span>
  95.                 </a>
  96.             </li>
  97.             <li>
  98.                 <a href="#">
  99.                     <img src="static/img/dh/nav-8.png" alt="">
  100.                     <span>领券</span>
  101.                 </a>
  102.             </li>
  103.             <li>
  104.                 <a href="#">
  105.                     <img src="static/img/dh/nav-9.png" alt="">
  106.                     <span>领金贴</span>
  107.                 </a>
  108.             </li>
  109.             <li>
  110.                 <a href="#">
  111.                     <img src="static/img/dh/nav-10.png" alt="">
  112.                     <span>PLUS会员</span>
  113.                 </a>
  114.             </li>
  115.         </ul>
  116.         <!-- 秒杀区 -->
  117.         <div class="ms">
  119.         </div>
  120.         <!-- 商品列表区 -->
  121.         <div class="tj">
  122.             <h2 class="title">猜你喜欢</h2>
  123.             <ul>
  124.                 <li class="item">
  125.                     <a href="">
  126.                         <img src="static/img/sp/sp-1.webp" alt="">
  127.                         <p>美的（Midea）电水壶热水壶电热水壶304不锈钢1.7L容量暖水壶烧水壶开水壶智能断电1705b</p>
  128.                         <div class="price">
  129.                             <span class="iconfont icon-rmb">79</span>
  130.                             <div>看相似</div>
  131.                         </div>
  132.                     </a>
  133.                 </li>
  134.                 <li class="item">
  135.                     <a href="">
  136.                         <img src="static/img/sp/sp-2.webp" alt="">
  137.                         <p>美的（Midea）电水壶热水壶电热水壶304不锈钢1.7L容量暖水壶烧水壶开水壶智能断电1705b</p>
  138.                         <div class="price">
  139.                             <span class="iconfont icon-rmb">79</span>
  140.                             <div>看相似</div>
  141.                         </div>
  142.                     </a>
  143.                 </li>
  144.                 <li class="item">
  145.                     <a href="">
  146.                         <img src="static/img/sp/sp-3.webp" alt="">
  147.                         <p>美的（Midea）电水壶热水壶电热水壶304不锈钢1.7L容量暖水壶烧水壶开水壶智能断电1705b</p>
  148.                         <div class="price">
  149.                             <span class="iconfont icon-rmb">79</span>
  150.                             <div>看相似</div>
  151.                         </div>
  152.                     </a>
  153.                 </li>
  154.                 <li class="item">
  155.                     <a href="">
  156.                         <img src="static/img/sp/sp-4.webp" alt="">
  157.                         <p>美的（Midea）电水壶热水壶电热水壶304不锈钢1.7L容量暖水壶烧水壶开水壶智能断电1705b</p>
  158.                         <div class="price">
  159.                             <span class="iconfont icon-rmb">79</span>
  160.                             <div>看相似</div>
  161.                         </div>
  162.                     </a>
  163.                 </li>
  164.                 <li class="item">
  165.                     <a href="">
  166.                         <img src="static/img/sp/sp-5.webp" alt="">
  167.                         <p>美的（Midea）电水壶热水壶电热水壶304不锈钢1.7L容量暖水壶烧水壶开水壶智能断电1705b</p>
  168.                         <div class="price">
  169.                             <span class="iconfont icon-rmb">79</span>
  170.                             <div>看相似</div>
  171.                         </div>
  172.                     </a>
  173.                 </li>
  174.                 <li class="item">
  175.                     <a href="">
  176.                         <img src="static/img/sp/sp-6.webp" alt="">
  177.                         <p>美的（Midea）电水壶热水壶电热水壶304不锈钢1.7L容量暖水壶烧水壶开水壶智能断电1705b</p>
  178.                         <div class="price">
  179.                             <span class="iconfont icon-rmb">79</span>
  180.                             <div>看相似</div>
  181.                         </div>
  182.                     </a>
  183.                 </li>
  184.                 <li class="item">
  185.                     <a href="">
  186.                         <img src="static/img/sp/sp-7.webp" alt="">
  187.                         <p>美的（Midea）电水壶热水壶电热水壶304不锈钢1.7L容量暖水壶烧水壶开水壶智能断电1705b</p>
  188.                         <div class="price">
  189.                             <span class="iconfont icon-rmb">79</span>
  190.                             <div>看相似</div>
  191.                         </div>
  192.                     </a>
  193.                 </li>
  194.                 <li class="item">
  195.                     <a href="">
  196.                         <img src="static/img/sp/sp-8.webp" alt="">
  197.                         <p>美的（Midea）电水壶热水壶电热水壶304不锈钢1.7L容量暖水壶烧水壶开水壶智能断电1705b</p>
  198.                         <div class="price">
  199.                             <span class="iconfont icon-rmb">79</span>
  200.                             <div>看相似</div>
  201.                         </div>
  202.                     </a>
  203.                 </li>
  204.                 <li class="item">
  205.                     <a href="">
  206.                         <img src="static/img/sp/sp-1.webp" alt="">
  207.                         <p>美的（Midea）电水壶热水壶电热水壶304不锈钢1.7L容量暖水壶烧水壶开水壶智能断电1705b</p>
  208.                         <div class="price">
  209.                             <span class="iconfont icon-rmb">79</span>
  210.                             <div>看相似</div>
  211.                         </div>
  212.                     </a>
  213.                 </li>
  214.                 <li class="item">
  215.                     <a href="">
  216.                         <img src="static/img/sp/sp-2.webp" alt="">
  217.                         <p>美的（Midea）电水壶热水壶电热水壶304不锈钢1.7L容量暖水壶烧水壶开水壶智能断电1705b</p>
  218.                         <div class="price">
  219.                             <span class="iconfont icon-rmb">79</span>
  220.                             <div>看相似</div>
  221.                         </div>
  222.                     </a>
  223.                 </li>
  224.                 <li class="item">
  225.                     <a href="">
  226.                         <img src="static/img/sp/sp-3.webp" alt="">
  227.                         <p>美的（Midea）电水壶热水壶电热水壶304不锈钢1.7L容量暖水壶烧水壶开水壶智能断电1705b</p>
  228.                         <div class="price">
  229.                             <span class="iconfont icon-rmb">79</span>
  230.                             <div>看相似</div>
  231.                         </div>
  232.                     </a>
  233.                 </li>
  234.                 <li class="item">
  235.                     <a href="">
  236.                         <img src="static/img/sp/sp-4.webp" alt="">
  237.                         <p>美的（Midea）电水壶热水壶电热水壶304不锈钢1.7L容量暖水壶烧水壶开水壶智能断电1705b</p>
  238.                         <div class="price">
  239.                             <span class="iconfont icon-rmb">79</span>
  240.                             <div>看相似</div>
  241.                         </div>
  242.                     </a>
  243.                 </li>
  244.                 <li class="item">
  245.                     <a href="">
  246.                         <img src="static/img/sp/sp-5.webp" alt="">
  247.                         <p>美的（Midea）电水壶热水壶电热水壶304不锈钢1.7L容量暖水壶烧水壶开水壶智能断电1705b</p>
  248.                         <div class="price">
  249.                             <span class="iconfont icon-rmb">79</span>
  250.                             <div>看相似</div>
  251.                         </div>
  252.                     </a>
  253.                 </li>
  254.                 <li class="item">
  255.                     <a href="">
  256.                         <img src="static/img/sp/sp-7.webp" alt="">
  257.                         <p>美的（Midea）电水壶热水壶电热水壶304不锈钢1.7L容量暖水壶烧水壶开水壶智能断电1705b</p>
  258.                         <div class="price">
  259.                             <span class="iconfont icon-rmb">79</span>
  260.                             <div>看相似</div>
  261.                         </div>
  262.                     </a>
  263.                 </li>
  264.             </ul>
  265.         </div>
  266.     </div>
  269.     <!-- 页脚菜单栏 -->
  270.     <div class="footer">
  271.         <ul>
  272.             <li>
  273.                 <span class="iconfont icon-home"></span>
  274.                 <span>首页</span>
  275.             </li>
  276.             <li>
  277.                 <span class="iconfont icon-layers"></span>
  278.                 <span>分类</span>
  279.             </li>
  280.             <li>
  281.                 <span class="iconfont icon-kehuguanli"></span>
  282.                 <span>京喜</span>
  283.             </li>
  284.             <li>
  285.                 <span class="iconfont icon-shopping-cart"></span>
  286.                 <span>登录</span>
  287.             </li>
  288.         </ul>
  289.     </div>
  290. </body>
  292. </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.     color: white;
  13.     text-decoration: none;
  14. }
  16. body {
  17.     background-color: #f6f6f6;
  18. }
  21. /* 媒体查询 */
  23. @media screen and (max-width: 480px) {
  24.     html {
  25.         font-size: 10px;
  26.     }
  27. }
  29. @media screen and (min-width: 480px) {
  30.     html {
  31.         font-size: 12px;
  32.     }
  33. }
  35. @media screen and (min-width: 640px) {
  36.     html {
  37.         font-size: 14px;
  38.     }
  39. }
  41. @media screen and (min-width: 720px) {
  42.     html {
  43.         font-size: 16px;
  44.     }
  45. }

index.css

  1. /* 引入初始化样式文件 */
  3. @import 'reset.css';
  5. /* 页眉 */
  7. .header {
  8.     position: fixed;
  9.     top: 0;
  10.     left: 0;
  11.     right: 0;
  12.     font-size: 1.4rem;
  13.     color: white;
  14.     height: 4.4rem;
  15.     background-color: #e43130;
  16.     z-index: 100;
  17. }
  20. /* 页脚*/
  22. .footer {
  23.     position: fixed;
  24.     bottom: 0;
  25.     left: 0;
  26.     right: 0;
  27.     font-size: 1.4rem;
  28.     color: #666;
  29.     height: 4.4rem;
  30.     background-color: #fafafa;
  31.     box-shadow: 0 0 3px #999;
  32.     z-index: 100;
  33. }
  36. /* 主体 */
  38. .main {
  39.     position: absolute;
  40.     top: 4.4rem;
  41.     bottom: 4.4rem;
  42.     left: 0;
  43.     right: 0;
  44.     font-size: 1.4rem;
  45.     min-width: 320px;
  46. }

header.css

  1. .header {
  2.     display: flex;
  3.     align-items: center;
  4. }
  7. /* 页眉中的三个部分比例 1:6:1 */
  9. .header .login {
  10.     color: #fff;
  11.     text-align: center;
  12.     flex: 1;
  13. }
  15. .header .menu {
  16.     text-align: center;
  17.     flex: 1;
  18.     font-size: 2.5rem;
  19. }
  21. .header .search {
  22.     flex: 6;
  23.     padding: 0.5rem;
  24.     background-color: #fff;
  25.     border-radius: 3rem;
  26.     display: flex;
  27. }
  30. /* logo  */
  32. .header .search .logo {
  33.     color: #e43130;
  34.     flex: 0 1 4rem;
  35.     font-size: 2rem;
  36.     /* 水平垂直居中 */
  37.     text-align: center;
  38.     line-height: 2rem;
  39. }
  42. /* 放大镜 */
  44. .header .search .zoom {
  45.     color: #ccc;
  46.     flex: 0 1 4rem;
  47.     border-left: 1px solid;
  48.     /* 水平垂直居中 */
  49.     text-align: center;
  50.     line-height: 2rem;
  51. }
  54. /* 搜索文本框 */
  56. .header .search .words {
  57.     flex: auto;
  58.     border: none;
  59.     outline: none;
  60.     color: #aaa;
  61. }

nav.css

  1. .main .nav {
  2.     padding: 1rem;
  3.     display: flex;
  4.     flex-flow: row wrap;
  5.     justify-content: space-between;
  6.     background: rgb(255, 255, 255);
  7.     border-radius: 1rem;
  8.     background-color: white;
  9.     margin: 0 0.6rem;
  10. }
  12. .main .nav li {
  13.     flex: 1 1 20%;
  14. }
  16. .main .nav li a {
  17.     color: #7b7b7b;
  18.     display: flex;
  19.     flex-flow: column nowrap;
  20.     align-items: center;
  21. }
  23. .main .nav li a img {
  24.     height: 4rem;
  25.     width: 4rem;
  26. }

tj.css

  1. .tj .title {
  2.     height: 4rem;
  3.     line-height: 4rem;
  4.     color: #555;
  5.     font-weight: 500;
  6.     text-align: center;
  7.     margin: 1rem 0;
  8. }
  10. .tj ul {
  11.     font-size: 1rem;
  12.     display: flex;
  13.     flex-wrap: wrap;
  14.     padding-bottom: 4.4rem;
  15. }
  17. .tj ul .item {
  18.     padding: 1rem;
  19.     flex: 1 1 calc(50% - 2rem);
  20.     background-color: #fff;
  21.     margin-left: 1rem;
  22.     margin-bottom: 1rem;
  23. }
  25. .tj ul .item a img {
  26.     width: 100%;
  27. }
  29. .tj ul .item a p {
  30.     color: #555;
  31.     line-height: 2rem;
  32.     overflow: hidden;
  33.     text-overflow: ellipsis;
  34.     display: -webkit-box;
  35.     -webkit-line-clamp: 2;
  36.     -webkit-box-orient: vertical;
  37. }
  39. .tj ul .item a .price {
  40.     display: flex;
  41.     justify-content: space-between;
  42.     color: red;
  43. }
  45. .tj ul .item a .price div {
  46.     color: grey;
  47.     background-color: #f0f2f5;
  48.     border-radius: .55rem;
  49.     text-align: center;
  50.     padding: 0.6rem;
  51.     line-height: 1rem;
  52. }

footer.css

  1. .footer>ul {
  2.     padding: 0.5rem;
  3.     display: flex;
  4.     justify-content: space-around;
  5.     align-items: center;
  6. }
  8. .footer>ul>li {
  9.     width: 20%;
  10.     display: flex;
  11.     flex-direction: column;
  12.     justify-content: center;
  13.     align-items: center;
  14.     font-size: 1rem;
  15.     cursor: pointer;
  16. }
  18. .footer>ul>li .iconfont {
  19.     font-size: 2rem;
  20. }

5.效果图

更多相关文章

  1. 字体图标的引入和通过媒体查询改变导航样式
  2. HTML样式和常用选择器
  3. 字体图标的引用和自定义样式/媒体查询的使用
  4. 数据库的CURD操作、PDO本质与原理的学习
  5. CSS之伪类选择器和简单盒子简单案例
  6. 伪类选择器与盒模型常用属性
  7. 伪类选择器-结构伪类、根据位置选择匹配
  8. 7.4——常用标签与应用场景之表格与单元格
  9. css伪类选择器和盒模型

随机推荐

  1. js/jquery操作div显示或隐藏
  2. Java程序员的JavaScript学习笔记（12——jQ
  3. 尝试隐藏表中的行时jQuery性能
  4. ASP.Net MVC与HTML + KnockoutJS + WebAP
  5. JSP中如何使用JQuery？
  6. Dreamweaver Cs4 jQuery自动提示插件绿色
  7. JQuery Ajax到PHP在查询期间更新div
  8. 用jQuery编写$($(this).children()[1]).h
  9. jQuery Mobile，在不使用data-position =“
  10. 文字效果 - 图像到css / jQuery