css3伸缩盒模子第三章(伸缩相干)

曹旭辉  论坛元老 | 7 天前 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 1933|帖子 1933|积分 5799

伸缩盒模子第三章(伸缩)

先容了伸缩性的伸缩提现到哪些方面，以及flex 居中的小本领，视觉差异等


  • flex 程度垂直居中
  • 伸缩性
  • flex 复合式属性
  • 项目排序
  • 侧轴单独对齐
flex 程度居中

我们可以利用flex 使元素居中对齐，当然也可以用 margin 等进行对比，但是比力麻烦
代码

  1.   <title>08.水平垂直居中对齐</title>
  2.   <style>
  3.      .outer {
  4.        width: 600px;
  5.        height: 600px;
  6.        background-color: #888;
  8.        /* 开启弹性盒子 */
  9.        display: flex;
  11.        /* 方案一   主轴   侧轴对齐 */
  12.        /* justify-content: center;
  13.        align-items: center; */
  15.       
  16.      }
  18.      .inner {
  19.        width: 150px;
  20.        height: 150px;
  21.        background-color: pink;
  23.        /* 方案二 */
  24.        margin: auto;
  25.      }
  27.   </style>
  28. </head>
  29. <body>
  30.     <div class="outer">
  31.        <div class="inner"></div>
  32.     </div>
  33. </body>
复制代码
效果


方案1

条件一定是必要开启弹性布局，display: flex;
   /* 方案一 主轴 侧轴对齐 */
  ​ justify-content: center;
  ​ align-items: center;
  方案2

   /* 方案二 */
  ​ margin: auto;
  flex-basic 基线



  • 概念： flex-basis 设置的是主轴方向的基准长度，会让宽度或高度失效。
  • flex-basis 默认值为 auto
代码

  1. <title>09.基线对齐</title>
  2.   <style>
  3.      .outer {
  4.        width: 800px;
  5.        height: 800px;
  6.        background-color: #888;
  8.        display: flex;
  10.        /* 主轴方向  如果是横向，那么flex-basis代表的就是宽度，高度就失效了 */
  11.        /* flex-direction: row; */
  13.         /* 主轴方向  如果是纵向，那么flex-basis代表的就是高度，宽度就失效了  */
  14.         flex-direction: column;
  16.      }
  18.      .inner {
  19.        width: 200px;
  20.        height: 200px;
  21.        background-color: deeppink;
  22.        border: 1px solid black;
  23.       
  24.      }
  26.      .inner2 {
  27.        /* 默认值是 auto */
  28.        /* flex-basis: auto; */
  29.        flex-basis: 300px;
  30.      }
  31.   </style>
  32. </head>
  33. <body>
  34.     <div class="outer">
  35.        <div class="inner">1</div>
  36.        <div class="inner inner2">2</div>
  37.        <div class="inner">3</div>
  38.     </div>
  39. </body>
复制代码
主轴方向

我们设置主轴方向的差别，会让宽或者高失效
主轴横向

   flex-direction: row
  .inner2 {
  ​ /* 默认值是 auto */
  ​ /* flex-basis: auto; */
  ​ flex-basis: 300px;
  }
  

结论

主轴方向 如果是横向，那么flex-basis代表的就是宽度，高度就失效了,我们设置的每一个项目宽度是200px，但是当我们设置了 flex-basis 为300px的时间，伸缩项目原来的200px宽度就失效了，统一为300px
主轴为纵向

我们可以设置主轴为纵向，也就是上下
   flex-direction: column;
  .inner2 {
  ​ /* 默认值是 auto */
  ​ /* flex-basis: auto; */
  ​ flex-basis: 300px;
  }
  

总结

主轴方向 如果是纵向，那么flex-basis代表的就是高度，宽度就失效了。每个项目本身是200px，当设置了 flex-basis 后，高度就变为 300px了
伸缩项目(伸)

flex-grow（伸）


  • 概念： flex-grow 定义伸缩项目标放大比例，默认为 0 ，即：纵使主轴存在剩余空间，也不拉伸（放大）。
  • 规则

    • 若全部伸缩项目标 flex-grow 值都为 1 ，则：它们将等分剩余空间（如果有空间的话）。
    • 若三个伸缩项目标 flex-grow 值分别为： 1 、 2 、 3 ，则：分别瓜分到： 1/6 、 2/6 、
      3/6 的空间。

代码

  1. <title>10.伸缩项目(伸)</title>
  2.   <style>
  3.      .outer {
  4.        width: 1000px;
  5.        height: 700px;
  6.        background-color: #888;
  7.        margin: 0 auto;
  9.        /* 开启弹性布局 */
  10.        display: flex;
  12.        /* 主轴方西  默认从左到右边 */
  13.        flex-direction: row;
  15.        /* 换行 */
  16.        flex-wrap: wrap;
  19.      }
  21.      .inner {
  22.        width: 200px;
  23.        height: 200px;
  24.        background-color: aqua;
  25.        border: 1px solid black;
  26.        box-sizing: border-box;
  27.        font-size: 30px;
  28.        text-align: center;
  30.        /* 开始拉伸 */
  31.        /* flex-grow: 1; */
  33.        /* 方式1   1   就是每一个 项目均分剩余的空间  */
  34.        /* flex-grow: 1; */
  35.      }
  37.      /* 方式二  分开设置    我们留下了300px的空间    那么就是所有的 flex-grow来平均分配这些剩下的空间
  38.         比例值    300 / 6 = 50  
  39.         inner1 = 50 * 1 = 50px + 200px   = 250px
  40.         inner2 = 50 * 2 = 100px + 300px   = 400px
  41.         inner3 = 50 * 3 = 150px + 200px   = 250px
  42.      */
  43.      .inner1 {
  44.        flex-grow: 1;
  45.      }
  47.      .inner2 {
  48.        width: 300px;
  49.        background-color: deeppink;
  50.        flex-grow: 2;
  51.      }
  53.      .inner3 {
  54.        flex-grow: 3;
  55.      }
  57.   </style>
  58. </head>
  59. <body>
  60.      <div class="outer">
  61.         <div class="inner inner1">1</div>
  62.         <div class="inner inner2">2</div>
  63.         <div class="inner inner3">3</div>
  64.      </div>
  65. </body>
复制代码
案例一

我们将伸缩项目均分
   .inner {
  ​ width: 200px;
  ​ height: 200px;
  ​ background-color: aqua;
  ​ border: 1px solid black;
  ​ box-sizing: border-box;
  ​ font-size: 30px;
  ​ text-align: center;
  ​ /* 开始拉伸 */
  ​ /* flex-grow: 1; */
  ​ /* 方式1 1 就是每一个 项目均分剩余的空间 */
  ​ flex-grow: 1;
  }
  效果


公式计算

我们设置了父容器盒子为1000px，三个盒子占用的空间为 200 + 300 + 200 = 700 ,也就是说我们还剩余了200px的宽度，这个时间我们设置了 flex-grow为1 就是是均分了剩下的 300 那么就是每个伸缩项目各占100


  • 总等分为 1 + 1 + 1 = 3
  • 300（剩余的空间） / 3 = 100
  • 项目1 = 100 * 1 + 200（自身宽度） = 300px
案例二

我们将每个项目均差别划分，这个时间每个项目分摊后得到的均不相同,分开设置 我们留下了300px的空间 那么就是全部的 flex-grow来平均分配这些剩下的空间
   .inner1 {
  ​ flex-grow: 1;
  }
  .inner2 {
  ​ width: 300px;
  ​ background-color: deeppink;
  ​ flex-grow: 2;
  }
  .inner3 {
  ​ flex-grow: 3;
  }
  效果




公式计算

  1. 比例值    300 / 6 = 50  
  2. inner1 = 50 * 1 = 50px + 200px   = 250px
  3. inner2 = 50 * 2 = 100px + 300px   = 400px
  4. inner3 = 50 * 3 = 150px + 200px   = 350px
复制代码
伸缩项目(缩)

flex-shrink（缩）


  • 概念： flex-shrink 定义了项目标压缩比例，默认为 1 ，即：如果空间不足，该项目将会缩小。
  • 注意
           我们必要将 flex-wrap设置为压缩模式，否则不见效 flex-wrap: nowrap;
背景

   

  • 我们设置了三个项目，分别为 item1 = 200px item2 = 300px item3 = 200px ，共起来是 700px
  • 容器巨细为 400px
  • 压缩空间为 700 - 400 = 300px
  我们必要在压缩的300 身上分析每一个均派了多少
  代码

  1. <title>11.伸缩项目(缩)</title>
  2.   <style>
  3.      .outer {
  4.        width: 400px;
  5.        height: 700px;
  6.        background-color: #888;
  7.        margin: 0 auto;
  9.        /* 开启弹性布局 */
  10.        display: flex;
  12.        /* 主轴方西  默认从左到右边 */
  13.        flex-direction: row;
  15.        /* 默认就是压缩空间    改选项一定要开启   */
  16.        flex-wrap: nowrap;
  19.      }
  21.      .inner {
  22.        width: 200px;
  23.        height: 200px;
  24.        background-color: aqua;
  25.        border: 1px solid black;
  26.        box-sizing: border-box;
  27.        font-size: 30px;
  28.        text-align: center;
  30.        /* 均分拉伸剩余空间 */
  31.        flex-grow: 1;
  33.       
  34.       /* 缩小 方式1 均分 */
  35.       /* flex-shrink: 1; */
  37.       /* 计算缩小方式   压缩300的空间
  38.         共计三个伸缩项目   
  39.         所有的都加起来计算分母  
  40.            200 * 1  + 300 * 1 + 200 * 1 = 700
  41.          inner1 比例   (200 * 1) / 700 =  0.2857
  42.          inner2 比例   300 * 1 / 700 =  0.4285
  43.          inner3 比例   200 * 1 / 700 =  0.2857
  45.          inner1 需要缩小的范围   300 * 0.2857 = 85.714
  46.          inner2 需要缩小的范围   300 * 0.4285 = 128.57
  47.          inner3 需要缩小的范围   300 * 0.2857 = 85.714
  50.          inner1 实际大小为 200 - 85.714 = 114.2857
  51.          inner2 实际大小为 300 - 128.57 = 171.4285
  52.          inner3 实际大小为 200 - 85.714 = 114.2857
  53.       */
  55.      }
  57.    
  58.      /* 方式2    每一个都不同  */
  59.      /*
  60.        总空间为：  (200 * 1) + (300 * 2) + (200 * 3) = 1400
  61.      */
  62.      .inner1 {
  63.          /*
  64.           所占比例为:      200 * 1 / 1400 = 0.14285
  65.           需要压缩的空间为：0.14285 * 300 = 42.857
  66.           剩余的空间为：    200 - 42.857 = 157.14285
  67.         */
  69.         flex-shrink: 1;
  70.      }
  72.      .inner2 {
  73.        width: 300px;
  74.        background-color: tomato;
  75.        /*
  76.           所占比例为:      300 * 2 / 1400 = 0.42857
  77.           需要压缩的空间为：0.42857 * 300 = 128.5714
  78.           剩余的空间为：    300 - 128.5714 = 171.4285
  79.         */
  80.        flex-shrink: 2;
  81.      }
  83.      .inner3 {
  84.        /*
  85.           所占比例为:      200 * 3 / 1400 = 0.42857
  86.           需要压缩的空间为：0.42857 * 300 = 128.5714
  87.           剩余的空间为：    200 - 128.5714 = 71.428
  88.         */
  89.       flex-shrink: 3;
  90.      }
  92.   </style>
  93. </head>
  94. <body>
  95.      <div class="outer">
  96.         <div class="inner inner1">1</div>
  97.         <div class="inner inner2">2</div>
  98.         <div class="inner inner3">3</div>
  99.      </div>
  100. </body>
复制代码
比例均分

我们缩小比例都设置为1 ，这个时间，我们看到1 和3 一样，摊的比我们想象中的要少，按照我们的想象，是不是 1 必要压缩100 ，2也是100 3 也是100 呢，实际不是。详细算法看下方公式
flex-shrink: 1
效果




计算公式

  1. 计算缩小方式   压缩300的空间
  2. 共计三个伸缩项目   
  3. 所有的都加起来计算分母  
  4. 200 * 1  + 300 * 1 + 200 * 1 = 700
  5. inner1 比例   (200 * 1) / 700 =  0.2857
  6. inner2 比例   300 * 1 / 700 =  0.4285
  7. inner3 比例   200 * 1 / 700 =  0.2857
  9. inner1 需要缩小的范围   300 * 0.2857 = 85.714
  10. inner2 需要缩小的范围   300 * 0.4285 = 128.57
  11. inner3 需要缩小的范围   300 * 0.2857 = 85.714
  14. inner1 实际大小为 200 - 85.714 = 114.2857
  15. inner2 实际大小为 300 - 128.57 = 171.4285
  16. inner3 实际大小为 200 - 85.714 = 114.2857
复制代码
比例不均分

我们将每一个项目压缩比例设置差别，压缩的空间照旧300 ，看这些是怎样分配的
   .inner1 {
  ​ flex-shrink: 1;
  }
  .inner2 {
  ​ width: 300px;
  ​ background-color: tomato;
  ​ flex-shrink: 2;
  }
  .inner3 {
  ​ flex-shrink: 3;
  }
  效果




公式计算

  1. 总空间为：  (200 * 1) + (300 * 2) + (200 * 3) = 1400
  2. # 项目1计算      flex-shrink: 1;
  3.   /*
  4.   所占比例为:      200 * 1 / 1400 = 0.14285
  5.   需要压缩的空间为：0.14285 * 300 = 42.857
  6.   剩余的空间为：    200 - 42.857 = 157.14285
  7.   */
  8.         
  9. # 项目2 计算        flex-shrink: 2;
  10. /*
  11. 所占比例为:      300 * 2 / 1400 = 0.42857
  12. 需要压缩的空间为：0.42857 * 300 = 128.5714
  13. 剩余的空间为：    300 - 128.5714 = 171.4285
  14. */
  16. # 项目3 计算           flex-shrink: 3;
  17. /*
  18. 所占比例为:      200 * 3 / 1400 = 0.42857
  19. 需要压缩的空间为：0.42857 * 300 = 128.5714
  20. 剩余的空间为：    200 - 128.5714 = 71.428
  21. */
  22.    
复制代码
flex 复合属性

flex 是复合属性，复合了： flex-grow 、 flex-shrink 、 flex-basis 三个属性，默认值为 0 1
auto 。


  • 注意

    • 我们一定要注意顺序，第一个代表为 flex-grow(拉)，flex-shirk(缩)，flex-basis 基线

代码

  1. <title>12.复合属性flex</title>
  2.   <style>
  3.      .outer {
  4.        width: 900px;
  5.        height: 700px;
  6.        background-color: #888;
  7.        margin: 0 auto;
  9.        /* 开启弹性布局 */
  10.        display: flex;
  12.        /* 主轴方西  默认从左到右边 */
  13.        flex-direction: row;
  15.        /* 默认就是压缩空间   */
  16.        flex-wrap: nowrap;
  17.       
  18.      }
  20.      .inner {
  21.        width: 200px;
  22.        height: 200px;
  23.        background-color: chocolate;
  24.        border: 1px solid black;
  25.        box-sizing: border-box;
  26.        font-size: 30px;
  27.        text-align: center;
  29.        /* 均分拉伸剩余空间 */
  30.        /* flex-grow: 1; */
  31.       
  32.        /* 均摊压缩空间 */
  33.        /* flex-shrink: 1; */
  34.      
  35.        /* 基线 */
  36.        /* flex-basis: 100px; */
  38.        /* 有顺序要求   拉  缩 基线 */
  40.        /* 写法1  拉伸   缩小   自动  简写  flex: auto */
  41.        /* flex: 1 1 auto; */
  43.        /* 写法2   全部都是拉伸的效果   简写 flex: 1 */
  44.        /* flex: 1 1 0; */
  46.        /* 写法3  不拉  不缩 高度自动  缩小的里面内容就溢出了 ，大了也不填充
  47.          简写 flex : none
  48.        */
  49.        /* flex: 0 0 auto; */
  51.        /* 写法4  不拉    可以缩  宽高自动  简写 flex: 0 auto 实际就是默认值 */
  52.        flex: 0 1 auto;
  54.      }
  56.   </style>
  57. </head>
  58. <body>
  59.      <div class="outer">
  60.         <div class="inner">1</div>
  61.         <div class="inner">2</div>
  62.         <div class="inner">3</div>
  63.      </div>
  64. </body>
复制代码
写法1



  • flex: 1 1 auto; 拉伸 缩小 自动
  • 简写为 flex: auto

写法2



  • flex: 1 1 0; 全部都是拉伸的效果
  • 简写 flex: 1

写法3



  • flex: 0 0 auto; 不拉 不缩 高度自动 缩小的里面内容就溢出了 ，大了也不填充
  • 简写 flex : none

写法4



  • flex: 0 1 auto; 不拉 可以缩 宽高自动 ，实际为默认值
  • flex: 0 1 auto;

项目排序与单独对齐

我们可以设置项目标分列顺序已经对齐方式；
代码

  1. <title>13.项目排序与单独对齐</title>
  2.   <style>
  3.      .outer {
  4.        width: 900px;
  5.        height: 700px;
  6.        background-color: #888;
  7.        margin: 0 auto;
  9.        /* 开启弹性布局 */
  10.        display: flex;
  12.        /* 主轴方西  默认从左到右边 */
  13.        flex-direction: row;
  15.        /* 默认就是压缩空间   */
  16.        flex-wrap: nowrap;
  17.       
  18.      }
  20.      .inner {
  21.        width: 200px;
  22.        height: 200px;
  23.        background-color: purple;
  24.        border: 1px solid black;
  25.        box-sizing: border-box;
  26.        font-size: 30px;
  27.        text-align: center;
  28.      }
  30.      .inner2 {
  31.        background-color: aliceblue;
  32.        order: -3;
  33.      }
  35.      .inner4 {
  36.       /* 排序，默认是0  也就是以写的标签一个一个的排列  */
  37.        order: -1;
  39.        /* 对齐  实际上是 侧轴 */
  40.        align-self: flex-end;
  41.      }
  43.   </style>
  44. </head>
  45. <body>
  46.      <div class="outer">
  47.         <div class="inner inner1">1</div>
  48.         <div class="inner inner2">2</div>
  49.         <div class="inner inner3">3</div>
  50.         <div class="inner inner4">4</div>
  51.      </div>
  52. </body>
复制代码
项目排序



  • order 属性定义项目标分列顺序。数值越小，分列越靠前，默认为 0 。
   .inner4 {
  /* 排序，默认是0 也就是以写的标签一个一个的分列 */
  ​ order: -1;
  }
  .inner2 {
  ​ background-color: aliceblue;
  ​ order: -3;
  }
  

单独对齐



  • 通过 align-self 属性，可以单独调整某个伸缩项目标对齐方式
  • 默认值为 auto ，表示继承父元素的 align-items 属性。
   .inner4 {
  /* 排序，默认是0 也就是以写的标签一个一个的分列 */
  ​ order: -1;
  ​ /* 对齐 实际上是 侧轴 */
  ​ align-self: flex-end;
  }
  


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

正序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

曹旭辉

论坛元老
这个人很懒什么都没写!

楼主热帖

标签云

渠道 国产数据库 集成商 AI 运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表