search

博客列表 >10 弹性盒子grow、shrink因子及移动电商首页简单操练

10 弹性盒子grow、shrink因子及移动电商首页简单操练

老黑
老黑原创
2020年06月26日 09:01:33777浏览

主要内容：

  1. item增长因子（flex-grow）、收缩因子（flex-shrink）及尺寸设置的优先级、简写
  2. PC端、移动端解决方案实战（主要练习弹性盒的各种操作）

1、item grow、shrink解决弹性盒大小问题

  • 这是一个很基础的功能，毕竟盒子大小无法控制的话，那很多布局使用等于还是有问题。
  • grow、shrink通过赋值的方式可以让内部的盒子快速达到理想分布。
  • 基本的原理也比较好理解。例如grow，如果剩余空间为3，刚好有3个元素（可以是最小单元的，也可以是一个弹性盒包），如果大家的因子都是1，那么每个就得1。如果两个为1，一个为0.5，那么每一单元就是3/2.5。然后每个去拿自己对应的部分。
  • 但是重点来了：如果所有item的grow factor加起来不等于1的时候，就按它们自己直接声称的比例去赋予。例如同样一个item的grow factor为0.5。如果只有它自己的话，或者连同其他item的值加起来不够1的时候，总剩余为150px的情况下，它可以得到75（150乘以0.5）。
    但是如果总值大于1，例如另外两个为1，它自己为0.5，那么它就只能得到150/2.5乘0.5=30px了。
  • shrink同样，总的多了多少，然后每个根据自己claim的因子大小去shrink对应的比例。
  • 不得不说老外的这种思路挺好的。
    1.   <div class="container">
    2.     <div class="item">1</div>
    3.     <div class="item">2</div>
    4.     <div class="item">3</div>
    5.   </div>
    1.   <style>
    2.     .container {
    3.       width: 300px;
    4.       display: flex;
    5.     }
    6.     .container > .item {
    7.       width: 60px;
    8.       /* 默认为0，不放大 */
    9.       flex-grow: 0;
    10.       /* 3 * 60 = 180, 主轴空间的宽度300，剩余空间为300-180=120px */
    11.       /* 120/3 = 40px，均分的话，每个人可以得到40。这个通过firefox中的元素查看可以看到对应的增长 */
    12.       flex: 1;
    13.       flex: auto;
    14.     }
    15.     .container > .item:first-of-type {
    16.       flex-grow: 0.5;
    17.       }
    18.       .container > .item:nth-of-type(2) {
    19.       flex-grow: 1;
    20.       }
    21.       .container > .item:last-of-type {
    22.       flex-grow: 1;
    23.       }
    24.       /* 增长因子和: 0.5 + 1 + 1 = 2.5 */
    25.       /* 120px / 2.5 = 48px */
    26.       /* 第2个，第3个最终为: 108px（60+48*1） */
    27.       /* 第1个最终是84px（60+48*0.5） */
    28.   </style>
    自己尝试的小于的例子：
    1. <style>
    2.   .container {
    3.     width: 300px;
    4.     height: 45px;
    5.     display: flex;
    6.   }
    7.   .container .item{
    8.       width: 50px;
    9.       font-size: 14px;
    10.       /* flex-grow: 0.2; */
    11.   }
    12.   .container :first-of-type{
    13.       flex-grow: 0.5;
    14.   }
    15.   .container :nth-last-child(2){
    16.       flex-grow: 0.1;
    17.   }
    18.   .container :last-of-type{
    19.       flex-grow: 0.1;
    20.   }
    21. </style>

2、简写、shrink的优先次序

  • ① 默认不放大、可收缩，使用原始大小。“flex: 0 1 auto;” 第一个0为不放大，第二个1为可收缩（占满收缩）。auto：为原始尺寸（flex-basis），为0或1。
    【注意】flex:0 1 auto不是放在弹性盒子里面，而是放在元素下。盒子中设置就会返回说上一级不是弹性盒因此无效。如图：

  1.     <style>
  2.       .container {
  3.         width: 300px;
  4.         display: flex;
  5.       }
  6.       .container > .item {
  7.         width: 60px;
  9.         /* flex: 放大因子 收缩因子 基础尺寸 */
  10.         /* 默认不放大，可收缩，尺寸使用原始大小 */
  11.         flex: 0 1 auto;
  13.         /* 可放大可收缩尺寸自动 */
  14.         flex: 1 1 auto;
  15.         /* 等价于 */
  16.         flex: 1;
  17.         flex: auto;
  19.         /* 禁止放大和收缩，保持原样 */
  20.         flex: 0 0 auto;
  21.         flex: none;
  23.         /* flex: 0; */
  24.         /* 等价于 */
  25.         flex: 0 0 0%;
  26.         /* 常用的值: 0 , 1, auto */
  27.       }
  28.     </style>

  • ② 大小的优先次序。min-width > flex-basis > width

    1.     .container > .item {
    2.       /* 原始大小，初始大小 */
    3.       width: 60px;
    4.       /* 基础尺寸优先级大于原始大小 */
    5.       flex-basis: 80px;
    7.       width: 60px;
    8.       /* 最小宽度优先级又大于基础尺寸 */
    9.       /* min-width: 90px; */
  • ③ 为了方便显示shrink，可以将container的高度调高，item的高度调低，效果如下图。

3、PC实战 - 典型网站三列

  • 最大的体会是：化繁为简。先框架再细节。
  • 自己的一个作业。其中有两个问题暂时解决不了，具体见下面的代码里面：
id 问题
1 list中的last-of-type右侧浮动不发挥作用。
2 list:hover时无法排除first-of-typle。 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <style>
  9.     *{
  10.         margin: 0;
  11.         padding: 0;
  12.         box-sizing: border-box;
  13.     }
  15.     body{
  16.         margin: auto;
  17.     }
  19.     .header, .footer{
  20.         background-color: #555555;
  21.         color: aqua;
  22.         height: 50px;
  23.         display: flex;
  24.         align-items: center;
  25.     }
  26.     .footer{
  27.         flex-direction: column;
  28.         justify-content: center;
  30.     }
  31.     li{
  32.         list-style: none;
  33.         float:left;
  34.         margin: 0 10px;
  35.     }
  36.     /* 下面这个不发挥作用。貌似这种情况用not进行限制无效。
  37.         .header ul li:hover :not(:first-of-type){
  38.         background-color: brown;
  39.         color: chartreuse;
  40.         font-size: large;
  41.         cursor: pointer;
  42.     } 
  43.     但如果如果是a标签的时候却可以：
  44.           header > a:hover:not(:first-of-type) {
  45.         color: coral;
  46.       }
  48.     下面这个也是可以用的。
  50.         .header ul li:nth-of-type(1){
  51.         margin-right: 40px;
  52.     }
  53.     */
  54.     .header > ul > li:hover :not(:first-of-type) {
  55.         background-color: brown;
  56.         color: chartreuse;
  57.         font-size: large;
  58.         cursor: pointer;
  59.     }
  61.     /* li:hover{
  62.         background-color: brown;
  63.         color: chartreuse;
  64.         font-size: large;
  65.         cursor: pointer;
  66.     } */
  67.     .header ul li:first-of-type{
  68.         margin-right: 40px;
  69.         color: gold;
  70.     }
  71.     /* 测试下来发现1：貌似li无法进行右侧浮动。
  72.         .header ul li:last-of-type{
  73.         float: right;
  74.         color:gold;
  75.     } */
  77.     .content{
  78.         height: 450px;
  79.         width: 800px;
  80.         display: flex;
  81.         margin: 5px auto;
  82.     }
  83.     .content >.item{
  84.         width: 180px;
  85.         border: 1px solid black;
  86.     }
  87.     .content >.item:nth-of-type(2){
  88.         flex-grow: 1;
  89.         margin: 0 10px;
  90.     }
  91.     .footer{
  92.         margin: auto;
  93.     }
  94. </style>
  95. <body>
  96.     <div class="header">
  97.         <ul>
  98.             <li class="meau">宏宇</li>
  99.             <li class="meau">凡界</li>
  100.             <li class="meau">妖界</li>
  101.             <li class="meau">凡界</li>
  102.             <li class="meau">造册</li>
  103.             <li class="meau">帮助</li>
  104.         </ul>
  105.     </div>
  107.     <div class="content">
  108.         <div class="item">左宇</div>
  109.         <div class="item">中宙</div>
  110.         <div class="item">右宇</div>
  111.     </div>
  113.     <div class="footer">
  114.         <div class="p">凡天下人事，人间妖，天上仙，均有其道</div>
  115.         <div class="p">混沌一开，万物显灵</div>
  116.     </div>
  117. </body>
  118. </html>

值得学习的几个点：

① 老司机对footer的简化处理：

  1.       footer {
  2.         display: flex;
  3.         flex-flow: column nowrap;
  4.         text-align: center;
  5.       }

② header直接用a来解决。而非div中用class的header。

  1.     <header>
  2.       <a href="">LOGO</a>
  3.       <a href="">首页</a>
  4.       <a href="">栏目1</a>
  5.       <a href="">栏目2</a>
  6.       <a href="">栏目3</a>
  7.       <a href="">登录</a>
  8.     </header>

4、移动实战 - 电商首页

移动端开发，先将浏览器展示端从pc切换到手机。

firefox元素检查右上角有一个切换按钮，点击下就可以。

（先看自己的后再看老司机的，发现有很多点值得学习，在后面有说明）

下面是最后截图：

下面是代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <style>
  9. * {
  10.   margin: 0;
  11.   padding: 0;
  12.   box-sizing: border-box;
  13. }
  14. a {
  15.   text-decoration: none;
  16.   color: #666;
  17. }
  19. html {
  20.   width: 100vw;
  21.   height: 100vh;
  22.   font-size: 14px;
  23.   color: #666;
  24. }
  26. body {
  27.   min-width: 360px;
  28.   background-color: #fff;
  29.   flex-flow: column nowrap;
  30. }
  32. .flex {
  33.     display: flex;
  34.     position: relative;
  35. }
  37. .h1 {
  38.   height: 35px;
  39.   background-color: lightgray;
  40.   justify-content: space-between;
  41. }
  42. .logo > img {
  43.   height: 35px;
  44. }
  46. .h2 {
  47.   height: 180px;
  48.   flex-direction: row;
  49.   justify-content: center;
  50. }
  51. .h2 > img {
  52.   height: 100%;
  53. }
  55. .h3 {
  56.   width: 355px;
  57.   height: 188px;
  58.   flex-wrap: wrap;
  59.   margin: 10px auto;
  60.   justify-content: center;
  61. }
  62. .head {
  63.   display: flex;
  64.   flex-direction: column;
  65.   align-items: center;
  66. }
  67. .h3 > div > img {
  68.   width: 60px;
  69.   margin: 0 10px;
  70. }
  71. .h3 > div > img,
  72. a:hover {
  73.   cursor: pointer;
  74.   color: lime;
  75. }
  78. footer {
  79.   color: #666;
  80.   background-color: #efefef;
  81.   border-top: 1px solid #ccc;
  82.   height: 55px;
  84.   /* position: fixed; */
  85.   bottom: 0;
  86.   width: 100vw;
  88.   display: flex;
  89.   justify-content: space-evenly;
  90. }
  91. footer > a {
  92.   display: flex;
  93.   flex-direction: column;
  94.   align-items: center; /*这个没想到用，结果字体不知道怎么去居中。纵轴的操作*/
  95. }
  96. body > footer a > span:first-of-type {
  97.   /* 图标字体应该大一些 */
  98.   font-size: 1.6rem;
  99. }
  101. /*---中间相对复杂的部分-----*/
  102. section{
  103.     width: 358px;
  104.     display: flex;
  105.     flex-flow: row wrap;
  106.     justify-content: center;
  107. }
  109. section> div > a > img {
  110.     width: 90px;
  111. }
  112. section > .goodshow {
  113.     width: 110px;
  114.     display: flex;
  115.     flex-flow: column nowrap; 
  116.     align-items: center;
  118. }
  120. section> div> a {
  121.     display: flex;
  122.     flex-flow: row nowrap; 
  123.     flex-grow: 1;
  124.     justify-content: center;
  125. }
  126. .info {
  127.     height: 16px;
  128.     display: flex;
  129.     flex-flow: row nowrap; 
  130.     justify-content: space-around;
  131. }
  132. </style>
  133. <body>
  134.     <header class="flex h1">
  135.       <div class="logo"><img src="static\images\logo.jpg" alt="" /></div>
  136.       <div class="meau">=</div>
  137.     </header>
  138.     <header class="flex h2">
  139.       <img src="static\images\banner.jpg" alt="" />
  140.     </header>
  141.     <header class="flex h3">
  142.       <div class="head">
  143.         <img src="static\images\link1.webp" alt="" />
  144.         <a href="">牛头</a>
  145.       </div>
  146.       <div class="head">
  147.         <img src="static\images\link2.webp" alt="" />
  148.         <a href="">马面</a>
  149.       </div>
  150.       <div class="head">
  151.         <img src="static\images\link3.webp" alt="" />
  152.         <a href="">狗尾</a>
  153.       </div>
  154.       <div class="head">
  155.         <img src="static\images\link4.webp" alt="" />
  156.         <a href="">狼爪</a>
  157.       </div>
  158.       <div class="head">
  159.         <img src="static\images\link1.webp" alt="" />
  160.         <a href="">云气</a>
  161.       </div>
  162.       <div class="head">
  163.         <img src="static\images\link2.webp" alt="" />
  164.         <a href="">天色</a>
  165.       </div>
  166.       <div class="head">
  167.         <img src="static\images\link3.webp" alt="" />
  168.         <a href="">红日</a>
  169.       </div>
  170.       <div class="head">
  171.         <img src="static\images\link4.webp" alt="" />
  172.         <a href="">金鲜</a>
  173.       </div>
  174.     </header>
  176. <!--这块是中间部分-->
  177.     <h2>
  178.         风高云淡<span class="iconfont hot"></span>
  179.     </h2>
  180.     <section>
  181.         <div class="goodshow">
  182.             <a href=""><img src="static\images\goods2.jpg" alt=""></a>
  183.             <div class="info">
  184.                 <p class="name">Nokia</p>
  185.                 <p class="price">2000尾</p>
  186.             </div>
  187.             <div class="iconfont hot"></div>            
  188.         </div>
  189.         <div class="goodshow">
  190.             <a href=""><img src="static\images\goods1.jpg" alt=""></a>
  191.             <div class="info">
  192.                 <p class="name">Nokia</p>
  193.                 <p class="price">2000尾</p>
  194.             </div>
  195.             <div class="iconfont hot"></div>            
  196.         </div>
  197.         <div class="goodshow">
  198.             <a href=""><img src="static\images\goods3.jpg" alt=""></a>
  199.             <div class="info">
  200.                 <p class="name">Nokia</p>
  201.                 <p class="price">2000尾</p>
  202.             </div>
  203.             <div class="iconfont hot"></div>            
  204.         </div>
  205.         <div class="goodshow">
  206.             <a href=""><img src="static\images\goods2.jpg" alt=""></a>
  207.             <div class="info">
  208.                 <p class="name">Nokia</p>
  209.                 <p class="price">2000尾</p>
  210.             </div>
  211.             <div class="iconfont hot"></div>            
  212.         </div>
  213.         <div class="goodshow">
  214.             <a href=""><img src="static\images\goods1.jpg" alt=""></a>
  215.             <div class="info">
  216.                 <p class="name">Nokia</p>
  217.                 <p class="price">2000尾</p>
  218.             </div>
  219.             <div class="iconfont hot"></div>            
  220.         </div>
  221.     </section>
  222. <!---->
  223.     <footer>
  224.       <a href="">
  225.         <span class="iconfont"></span>
  226.         <span>首页</span>
  227.       </a>
  228.       <a href="">
  229.         <span class="iconfont"></span>
  230.         <span>凡品</span>
  231.       </a>
  232.       <a href="">
  233.         <span class="iconfont"></span>
  234.         <span>妖品</span>
  235.       </a>
  236.       <a href="">
  237.         <span class="iconfont"></span>
  238.         <span>仙品</span>
  239.       </a>
  240.     </footer>
  241.   </body>
  242. </html>
  • 老司机经验学习：
    ① 一上来的对Style的基本处理：清零及基本配置做好。例如：
id 详情
1 整体的潜在设置取消掉
2 整体的字体大小、颜色灰度
3 移动端大结构方面的column方向设置，nowrap 
  1.       * {
  2.         margin: 0;
  3.         padding: 0;
  4.         box-sizing: border-box;
  5.       }
  6.       a {
  7.         text-decoration: none;
  8.         color: #666;
  9.       }
  11.       html {
  12.         /* vw： 可视区宽度，100指100份 */
  13.         /* vh:可视区的高度，100指100分 */
  14.         width: 100vw;
  15.         height: 100vh;
  16.         font-size: 14px;
  17.         color: #666;
  18.       }
  20.       body {
  21.         min-width: 360px;
  22.         background-color: #fff;
  23.         display: flex;
  24.         flex-flow: column nowrap;
  25.       }

② header是这样处理的，用了字体图标，自己却忘了：

  1.     <header>
  2.       <a href="">LOGO</a>
  3.       <span class="iconfont"></span>
  4.     </header>

header的处理，通过jusity-content中的space-between来让两元素分别显示到两侧。

postion:fixed来确定一直显示，不随下滑而消失。

  1.       body > header {
  2.         color: white;
  3.         background-color: #333;
  5.         height: 30px;
  6.         width: 100vw;
  8.         padding: 0 15px;
  9.         position: fixed;
  11.         display: flex;
  12.         align-items: center;
  13.         justify-content: space-between;
  14.       }

③ 主体部分，每个div下面用两个a来实现。自己的没有第一个a，这样可能点了图片就没有效果。

  1.       <div>
  2.         <a href=""><img src="static/images/link1.webp" alt="" /></a>
  3.         <a href="">京东超市</a>
  4.       </div>

④ footer的做法(space-evenly来做平均分配；居中显示在横轴的时候用align-items)

  1.       body > footer {
  2.         color: #666;
  3.         background-color: #efefef;
  4.         border-top: 1px solid #ccc;
  5.         height: 55px;
  7.         position: fixed;
  8.         bottom: 0;
  9.         width: 100vw;
  11.         display: flex;
  12.         justify-content: space-evenly;
  13.       }
  14.       body > footer a {
  15.         margin-top: 10px;
  16.         font-size: 0.8rem;
  17.         display: flex;
  18.         /* 垂直排列不换行 */
  19.         flex-flow: column nowrap;
  20.         /* 交叉轴项目居中显示 */
  21.         align-items: center;
  22.       }
  23.       body > footer a > span:first-of-type {
  24.         /* 图标字体应该大一些 */
  25.         font-size: 1.6rem;
  26.       }
上一条：html基础知识下一条：Flex弹性盒子布局
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多