search

博客列表 >CSS学习_0705作业

CSS学习_0705作业

bloght5386
bloght5386原创
2021年07月19日 16:39:00503浏览

作业内容：实例演示flex容器与项目中常用的属性,并写出功能。

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.         <style>
  7.              * {
  8.                  margin: 0;
  9.                  padding: 0;
  10.                  box-sizing: border-box;
  11.              }     
  12.                  :root {
  13.                      font-size: 10px;
  14.                  }
  15.                  body {
  16.                      font-size: 1.6rem;
  17.                  }
  18.                  .container {
  19.                      border: 1px solid;
  20.                      width: 29em;
  21.                      height: 20em;
  22.                      display: flex;
  23.                      /* flex-wrap: nowrap; *//* 默认不换行 */
  24.                      /* flex-wrap: wrap;//换行 */
  25.                      /* flex-direction: row; 行的方向*/
  26.                      /* flex-direction: row-reverse;反向 */
  27.                      /* flex-direction: column;列的方向 */
  28.                      /* 简写: */
  29.                      /* flex-flow: row wrap;主轴方向换行 */
  30.                      /* justify-content: flex-start; */
  31.                       /* justify-content: flex-end; */
  32.                        /* justify-content: space-between;两端对齐 */
  33.                         /* justify-content: space-around;分散对齐 */
  34.                         /* justify-content: space-evenly;平均对齐 */
  35.                         /* flex-basis: 25em;项目在主轴上的宽度 */
  36.                         /* flex-shrink: 0;不收缩 */
  37.                         /* flex-shrink: 1;收缩 */
  38.                         /* flex-grow: 0;禁止放大 */
  39.                         /* flex-grow: 1;允许放大 */
  40.                         /* flex: 0 1 auto;禁止放大 允许收缩 宽度自动 */
  41.                  }
  42.                  .container>.item {
  44.                      padding: 1em;
  45.                      border: 1px solid;
  46.                      background-color: aquamarine;
  47.                  }
  48.         </style>
  49.     </head>
  50.     <body>
  51.         <div class="container">
  52.             <div class="item">item1</div>
  53.             <div class="item">item2</div>
  54.             <div class="item">item3</div>
  55.             <div class="item">item4</div>
  57.         </div>
  58.     </body>
  59. </html>
上一条：1. 实例演示Ajax的get,post请求; 2. 练习选顶卡和换肤案例下一条：手机号隐藏中间四位
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多