博客列表 >flex容器属性的案例-PHP培训十期线上班

flex容器属性的案例-PHP培训十期线上班

方小生
方小生原创
2019年12月24日 17:18:16869浏览

12月23日作业

1.手撕flex容器六大属性及功能

flex六大属性及功能

2.flex容器小案例

demo1示例

  1. <!DOCTYPE HTML>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>flex布局小案例</title>
  6. <style>
  7. .container{
  8. border:1px dashed red;
  9. /*只要盒子加了padding、border,就得加box-sizing*/
  10. background-color:lightyellow;
  11. box-sizing:border-box;
  12. }
  13. .item{
  14. width:100px;
  15. height:50px;
  16. border:1px dashed lightblue;
  17. }
  18. .container{
  19. /*转为弹性盒子*/
  20. display:flex;
  21. /*1.容器中的主轴方向*/
  22. /* flex-direction:column; */
  23. /* flex-direction:row; */
  24. /*2.是否允许创建多行容器,一行排不下,是否允许换行*/
  25. /* flex-wrap:nowrap; */
  26. /* flex-wrap:wrap; */
  27. /*3.上面两个属性缩写*/
  28. flex-flow:row wrap;
  29. /*4.项目在主轴上的对齐方式*/
  30. /* justify-content:flex-start; */
  31. /* justify-content:flex-end; */
  32. /* justify-content:center; */
  33. /*剩余空间分配方式*/
  34. /* justify-content:space-between; */ /*两端对齐*/
  35. /* justify-content:space-around; */ /*分散对齐*/
  36. justify-content:space-evenly; /*平均对齐*/
  37. /*5.项目在交叉轴上的对齐方式*/
  38. height:300px;
  39. /* align-items:flex-start; */
  40. /* align-items:flex-end; */
  41. /* align-items:center; */
  42. /*6.项目在多行容器的交叉轴上的对齐方式*/
  43. /* align-content:space-between; */
  44. /* align-content:space-around; */
  45. /* align-content:space-evenly; */
  46. align-content:center;
  47. /* align-content:flex-end; */
  48. }
  49. </style>
  50. </head>
  51. <body>
  52. <div class="container">
  53. <span class="item">item1</span>
  54. <span class="item">item2</span>
  55. <span class="item">item3</span>
  56. <span class="item">item4</span>
  57. <span class="item">item5</span>
  58. <span class="item">item6</span>
  59. <span class="item">item7</span>
  60. <span class="item">item8</span>
  61. </div>
  62. </body>
  63. </html>

demo1运行截图

flex布局

3.对于12月20日布局作业的总结

作为一个前端小司机,在这次布局练习中很多细节没有做到位,其中存在的问题如下:
1.很多地方缺少链接;比如,第一个logo部分,看到这,应该立马想到这个是可点击的,需要加链接;还有导航的链接等
2.图片的空隙问题,没有处理;
3.在写css更多的使用后代选择器,并没像老师那样精准定位使用子代选择器(ps:之前不熟悉,现在熟了),说明其他的选择器属性不熟悉,需要多看
4.整体结构虽相同,但感觉没老师的清晰;心里总觉得自己没有老师写的好,而且自己采用表格布局(不是很主流,应该使用定位)
5.语义化标签与简洁化标签的使用,什么原则,我还是不知道

总结一下:从和老师的代码对比中看出,虽然实现了同样效果,可是我对布局结构还是不是很深入,很多问题忽视掉了

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议