作业内容：实例演示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. flex容器以及属性
  2. flex容器
  3. flex初体验之常用属性练习
  4. 关于VMware虚拟机磁盘收缩的几种方法
  5. C语言进阶（六）--自定义类型详解(结构体+枚举+联合)
  6. C语言之结构体内存的对齐
  7. 收缩表段(shrink space)
  8. flex 容器的 flex-flow, justify-content, align-items, align-c
  9. grid对齐方式与基础实战

随机推荐

  1. Python NameError:全局名称“Form”没有
  2. Hive中使用Python实现Transform时遇到Bro
  3. python学习笔记(3)--爬虫基础教程1
  4. 在NumPy中更改数组边缘的值
  5. 学习用pyhon写hive udf
  6. 创建单独的函数而不是一个大的缓慢处理时
  7. python打印系统所有tcp,udp监听端口及服
  8. python学习（13）————jieba进阶生成词云
  9. 用于搜索和替换大字符串的最快Python方法
  10. 基于scrapy框架的关于58同城招聘网站信息