search

博客列表 >实例演示flex常用的6个属性

实例演示flex常用的6个属性

秋闲独醉
秋闲独醉原创
2022年07月13日 16:36:22272浏览

实例演示flex常用的6个属性

  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>实例演示flex常用的6个属性</title>
  8.     <link rel="stylesheet" href="demo.css" />
  9.   </head>
  10.   <body>
  11.     <!-- flex容器三个必知属性
  12.     1. flex-flow: 主轴, 换行
  13.     2. place-content: 项目在主轴上的排列与剩余空间分配
  14.     3. palce-items: 项目在交叉轴上的对齐方式 
  15.       项目上必知的3个属性: 
  16.       1. flex: 控制项目缩放与宽度
  17.       2. order: 控制项目在主轴的排列顺序
  18.       3. place-self: 控制某个项目在交叉轴上的对齐方式  -->
  19.     <div class="flex">
  20.       <div class="item">item1</div>
  21.       <div class="item">item2</div>
  22.       <div class="item">item3</div>
  23.       <div class="item">item4</div>
  24.     </div>
  25.   </body>
  26. </html>
  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4. }
  5. /* flex容器三个必知属性
  6. 1. flex-flow: 主轴, 换行
  7. 2. place-content: 项目在主轴上的排列与剩余空间分配
  8. 3. palce-items: 项目在交叉轴上的对齐方式 
  9.   项目上必知的3个属性: 
  10.   1. flex: 控制项目缩放与宽度
  11.   2. order: 控制项目在主轴的排列顺序
  12.   3. place-self: 控制某个项目在交叉轴上的对齐方式  */
  13. body .flex {
  14.   width: 400px;
  15.   height: 400px;
  16.   box-sizing: border-box;
  17.   background-color: lightblue;
  18.   /* 转换为弹性盒子 */
  19.   display: flex;
  20.   border: 1px solid yellow;
  21.   /* 轴的方向flex-direction,默认主轴方向也就是x轴 */
  22.   /* 剩余空间在右边 */
  23.   flex-direction: row;
  24.   /* 剩余空间在左边 */
  25.   flex-direction: row-reverse;
  26.   /* 设置方向是交叉轴,也就是y轴方向 */
  27.   flex-direction: column;
  28.   flex-direction: column-reverse;
  29.   /* 设置允许换行 */
  30.   flex-direction: row;
  31.   width: 200px;
  32.   flex-wrap: wrap;
  33.   /* 不允许换行 */
  34.   flex-wrap: nowrap;
  35.   /* 简写flex-flow: flex-direction flex-wrap */
  36.   flex-flow: row nowrap;
  37.   width: 400px;
  38.   /* 设置剩余空间的位置 */
  39.   /* 剩余空间在左边 */
  40.   place-content: end;
  41.   /* 剩余空间在右边 */
  42.   place-content: start;
  43.   /* 剩余空间在两边 */
  44.   place-content: center;
  45.   /* 剩余空间在相临无素中间平均分配*/
  46.   place-content: space-between;
  47.   /* 剩余空间在头尾和中间分配 */
  48.   place-content: space-around;
  49.   /* 剩余空间在头尾和中间平均分配 */
  50.   place-content: space-evenly;
  52.   /* palce-items 项目在交叉轴上的对齐 */
  53.   /* 自动伸展 */
  54.   place-items: stretch;
  55.   /* 上对齐 */
  56.   place-items: start;
  57.   /* 下对齐 */
  58.   place-items: end;
  59. }
  61. .item {
  62.   width: 80px;
  63.   height: 200px;
  64.   background: lightcoral;
  65.   border: 1px solid blue;
  66.   /* flex: 放大因子 收缩因子 计算宽度 */
  67.   flex: 0 1 40px;
  68. }
  69. /* 改动项目的顺序 */
  70. div.flex > div:first-of-type {
  71.   order: 10;
  72. }
  73. div.flex > div:nth-of-type(3) {
  74.   order: -1;
  75. }
  76. /* 项目的对齐方式 */
  77. div.flex > div:nth-of-type(4) {
  78.   /* 上对齐 */
  79.   place-self: start;
  80.   /* 下对齐 */
  81.   place-self: end;
  82. }
上一条：这几个Python装杯神器一定要收藏好！下一条：0712flex常用属性
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多