search

博客列表 >1222 flex容器的常用属性 与布局展示

1222 flex容器的常用属性 与布局展示

Allen在php中文网的学习笔记
Allen在php中文网的学习笔记原创
2020年12月23日 08:19:37640浏览

作业

作业内容：将flex容器与项目的常用属性全部进行实例演示，并理解属性的常用值的显示效果
演示地址: https://php.gzj2001.com/1221/index.html
image.png

作业代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>1222作业</title>
  8.     <style>
  9.         /* 初始化一些默认参数 并使用IE盒子 */
  10.         * {
  11.             padding: 0;
  12.             margin: 0;
  13.             box-sizing: border-box;
  14.         }
  16.         /* 将容器转换为flex弹性容器 */
  17.         .container {
  18.             /* 转换flex容器 */
  19.             display: flex;
  20.             /* 添加边框便于观察 */
  21.             border: 1px solid red;
  22.             /* 设置高度 */
  23.             height: 20em;
  24.             /* 设置内边距 */
  25.             padding: 1em;
  26.             /* 设置外边距 */
  27.             margin: 1em;
  30.             /* 弹性容器主要属性 */
  31.             /* 主轴方向与是否换行 */
  32.             flex-flow: row wrap;
  34.             /* 一行项目在主轴上的位置 */
  35.             /* justify-content:center; */
  37.             /* 一行项目在交叉轴上的位置 */
  38.             /* align-items: center; */
  41.         }
  43.         .container>.item {
  44.             /* 给项目添加背景色便于观察 */
  45.             background-color: lightyellow;
  47.             /* 给项目添加边框便于观察 */
  48.             border: 1px solid springgreen;
  49.             /* 设置宽度便于观察 */
  50.             width: 5em;
  51.         }
  53.         /* 项目常用属性 flex展示 【设置基本项目的伸缩与宽度】 */
  54.         .container .item {
  55.             /* 默认 */
  56.             flex: initial;
  58.             /* 允许放大 和 缩放 */
  59.             flex: auto;
  61.             /* 禁止放大和 缩放 */
  62.             flex: none;
  63.         }
  65.         /* 项目常用属性 align-self展示 【某个项目的对齐方式 】 */
  67.         /* 以第八个项目为例来展示 */
  68.         .container .item:nth-of-type(8) {
  69.             /* 默认伸展 */
  70.             align-self: stretch;
  71.             /* 从上往下 */
  72.             /* align-self: flex-start; */
  73.             /* 从下往上 */
  74.             /* align-self: flex-end; */
  75.             /* 居中 */
  76.             /* align-self: center; */
  77.         }
  79.         /* 项目常用属性 order展示 【置某个项目在主轴上的排列顺序】*/
  80.         .container .item:nth-of-type(1) {
  81.             background-color: green;
  82.             order: 2;
  83.         }
  85.         .container .item:nth-of-type(2) {
  86.             background-color: #000;
  87.             order: 5;
  88.         }
  90.         .container .item:nth-of-type(3) {
  91.             background-color: #fff;
  92.             order: 1;
  93.         }
  95.         .container .item:nth-of-type(4) {
  96.             background-color: #456789;
  97.             order: 4;
  98.         }
  100.         .container .item:nth-of-type(5) {
  101.             background-color: #987654;
  102.             order: 8;
  103.         }
  105.         .container .item:nth-of-type(6) {
  106.             background-color: #red
  107.             order: -1;
  108.         }
  110.         .container .item:nth-of-type(7) {
  111.             background-color: #658963;
  112.             order: 6;
  113.         }
  114.     </style>
  116. </head>
  118. <body>
  119.     <div class="container">
  120.         <div class="item">1</div>
  121.         <div class="item">2</div>
  122.         <div class="item">3</div>
  123.         <div class="item">4</div>
  124.         <div class="item">5</div>
  125.         <div class="item">6</div>
  126.         <div class="item">7</div>
  127.         <div class="item">8</div>
  128.     </div>
  129. </body>
  131. </html>
上一条：PHP 使用 jwt 方式用户身份认证（示例代码）下一条：1221 定位展示 与 利用绝对定位制作一个模态框
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多