Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > List of blog posts > WEB前端教学-flex 6个属性练习
Blogger Information
Blog 3
fans 0
comment 0
visits 2565
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
WEB前端教学-flex 6个属性练习
Amiable崔洪刚
Original
456 people have browsed it

flex 弹性容器六个属性练习（代码写错了，重新提交）

先上传下代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>flex属性应用</title>
  6.     <style>
  8.         .container {
  9.             width: 600px;
  10.             height: 300px;
  11.             border: 1px dashed;
  12.             /*只要盒子加了padding,border 就马上加上box-sizing*/
  13.             box-sizing: border-box;
  14.             background-color: lightskyblue;
  15.         }
  16.         .item {
  17.             width: 200px;
  18.             height: 50px;
  19.             border: 1px dashed;
  20.             background-color: wheat;
  22.         }
  23.         .container {
  25.             display: flex;
  26.         }
  27.         .container {
  29.            /*设置不同的属性会产生不同的排列效果*/
  30.             /*flex-direction: row;*/
  31.             /*flex-direction: column;*/
  32.             flex-wrap: wrap;
  33.             /*flex-flow: row wrap;*/
  34.             /*justify-content:  center;*/
  35.             /*align-items: center;*/
  36.             /*align-content: space-evenly;*/
  37.         }
  38.     </style>
  39. </head>
  40. <body>
  41. <div class="container">
  42.     <span class="item">1</span>
  43.     <span class="item">2</span>
  44.     <span class="item">3</span>
  45.     <span class="item">4</span>
  46.     <span class="item">5</span>
  47.     <span class="item">6</span>
  48.     <span class="item">7</span>
  50. </div>
  52. </body>
  53. </html>

手写作业：

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