Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 1223作业
Blogger Information
Blog 7
fans 0
comment 0
visits 5117
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
1223作业
孤心泪的博客
Original
804 people have browsed it
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=\, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>flexDemos</title>
  8.     <style>
  9.     .container {
  10.         background-color: red;
  11.         border: 1px dashed;
  12.         box-sizing: border-box;
  13.     }
  14.     .item {
  15.         width: 100px;
  16.         height: 50px;
  17.         border: 1px dashed;
  18.         background-color: lightgreen;
  19.     }
  20.     .container {
  21.         /* 转为弹性盒子 */
  22.         display: flex;
  23.         /* 子元素全部转为：行内块元素，水平排列，可以设置宽高 */
  24.     }
  25.     .container {
  26.         /* 1. flex-direction:设置容器的主轴方向 */
  27.         flex-direction: row;
  28.         /* flex-direction: column; */
  30.         /* 2.flex-wrap:是否允许创建多行，默认一行 */
  31.         flex-wrap: nowrap;
  32.         /* flex-wrap: wrap; */
  34.         /* 3. flex-flow: 是上面两个的数星星的简写 */
  35.         /* flex-flow：主轴方向 是否换行 */
  36.         flex-flow: row wrap;
  38.         /* 4.设置容器中的项目在主轴上的对齐方式 */
  39.         justify-content:flex-start;
  40.         /* justify-content: flex-end; */
  41.         /* justify-content: center; */
  43.         /* 分配主轴上剩余的空间 */
  44.         /* 分散对齐 */
  45.         /* justify-content: space-around; */
  46.         /* 两端对齐 */
  47.         /* justify-content: space-between; */
  48.         /* 平均分散 */
  49.         /* justify-content: space-evenly; */
  51.         /* 5. 项目在交叉轴方向的排列方式 */
  52.         height: 200px;
  53.         /* align-items: flex-end;
  54.         align-items: flex-start; */
  55.         align-items: center;
  57.         /* 6. align-content 设置项目在多行容器交叉轴上的对齐方式 */
  58.         /* align-content: space-between; */
  59.         /* align-content: space-around; */
  60.         align-content: space-evenly;
  61.     }
  62.     </style>
  63. </head>
  64. <body>
  65.     <div class="container">
  66.         <span class="item">item1</span>
  67.         <span class="item">item2</span>
  68.         <span class="item">item3</span>
  69.         <span class="item">item4</span>
  70.         <span class="item">item5</span>
  71.         <span class="item">item6</span>
  72.         <span class="item">item7</span>
  73.         <span class="item">item8</span>
  74.     </div>
  75. </body>
  76. </html>

默写flex属性

附加
存在的问题：
class命名是多单词时，通常是用‘-’连接，而不是’_’
体会：
1.布局之前应该先构建一个大致布局框架，从上至下，从左到右划分区域，然后再写样式来进行调整布局
2.要灵活运用position:relative相对定位来进行布局(找到合适的定位基准)
3.position:absolute和position:fixed的异同点：都会脱离正常的文本流；position:fixed是相对于浏览器进行定位，position:absolute是相对于设置了定位属性的父级元素进行定位，若父级元素均未设置定位，此时等价于position:fixed

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：最后的总结是亮点, 相当精彩
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post