Blogger Information
Blog 5
fans 1
comment 0
visits 3249
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
Flex容器简单小结 - PHP培训十期线上班
Yin熊
Original
561 people have browsed it

一、 Flex容器的6个属性

Flex容器的属性有6个,分别是flex-directionflex-wrapjustify-contentailgn-itemailgn-contentflex-flow,将其功能和可选值整理成以下图片(偷个懒,这里就不码了):

二、Flex容器简单案例

根据上面的整理,写了一个小小的案例,每个值都尝试以下,以便加深对Flex布局的理解。

1、 效果图

2、代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Flex容器</title>
  6. <style>
  7. .container {
  8. width: 600px;
  9. height: 200px;
  10. border: 1px dashed red;
  11. box-sizing: border-box;
  12. display: flex;
  13. justify-content: space-around;
  14. /*align-items: center;*/
  15. flex-flow: row wrap;
  16. align-content: space-between;
  17. }
  18. .container > span {
  19. width: 160px;
  20. height: 30px;
  21. line-height: 30px;
  22. background-color: lightpink;
  23. text-align: center;
  24. }
  25. </style>
  26. </head>
  27. <body>
  28. <div class="container">
  29. <span class="item">1</span>
  30. <span class="item">2</span>
  31. <span class="item">3</span>
  32. <span class="item">4</span>
  33. <span class="item">5</span>
  34. <span class="item">6</span>
  35. <span class="item">7</span>
  36. <span class="item">8</span>
  37. <span class="item">9</span>
  38. </div>
  39. </body>
  40. </html>
  41. `

三、 首页头部作业总结

1、存在的问题

首先,我觉得最大的问题就是CSS选择器上面,一直都是使用父代选择器,而不是子元素选择器,写出来的代码不够商业化,不够规范。其次,是一些小问题。比如网站logo忘记加a标签,没有使用大的container包住三个部分等等。

2、 心得体会

我也算是带着点基础来学习的,但我还是很期待听老师授课的内容,迫不及待想收获一些我之前未曾学到过的知识,纠正我之前写那些不规范的代码风格。边看老师写代码的时候同时反思自己是怎么写的,怎么实现这个页面布局的,印象最深的就是margin-left:-30px;,知道可以设置成负的,但从未试过,也没想到可以实现这样的效果。

这几天的学习,收获得不能说算很多,但也不算少,巩固知识居多,接下来一段时间的学习才是重点,需要多花点时间,努力收获到更多的知识,不辜负这三四个月的时光。

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