Blogger Information
Blog 22
fans 1
comment 0
visits 17697
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
第十期FLEX容器属性案例+网站头部布局分析总结(2019-12-23)
齐齐
Original
798 people have browsed it

传统布局实现垂直居中效果非常麻烦,flex布局几个属性轻松解决,相对与传统的布局用起来相当简便,能够更加快速的效果。flax布局中项目(元素),能自动适应浏览器窗口的变化,比较适合移动端的布局。09年出现,目前对于各大常用浏览器兼容已非常成熟。

flex容器6大属性手写笔记

flex容器属性案例展示

  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>flex术语</title>
  6. <style>
  7. .container{border:1px dotted;background:lightblue}
  8. .item{width: 100px;height: 50px;border:1px dashed;background:#f60;}
  9. .container{
  10. /*转为弹性盒子/flex容器*/
  11. display:flex;
  12. /*子元素转为行内块元素,在一行可设置宽和高*/
  13. /*1.flex-direction:设置主轴中的容器方向,默认为行排列*/
  14. /*flex-direction: row;*/
  15. /*flex-direction: column;*/
  16. /*2.flex-warp:是否允许创建多行容器,一排放不下,是否允许换行显示*/
  17. /*flex-wrap: nowrap;*/
  18. /*flex-wrap:wrap;*/
  19. /*3.flex-flow:是上面两个属性的简写*/
  20. /*flex-flow:主轴方向,是否允许换行*/
  21. flex-flow:row wrap;
  22. /*4.设置容器中的项目在主轴上的对齐方式*/
  23. /*justify-content: flex-start;*/
  24. /*justify-content: flex-end;*/
  25. /*justify-content: center;*/
  26. /*可以分配主轴上的剩余空间*/
  27. /*两端对齐*/
  28. /*justify-content: space-between;*/
  29. /*分散对齐*/
  30. /*justify-content:space-around;*/
  31. /*平均对齐*/
  32. justify-content:space-evenly;
  33. /*5.项目在交叉轴上的排列方式*/
  34. height: 200px;
  35. /*align-items:flex-start;*/
  36. /*align-items:flex-end;*/
  37. /*align-items:center;*/
  38. /*6.align-content设置容器在多行容器在交叉轴上的对齐方式*/
  39. /*align-content: flex-start;*/
  40. /*align-content:space-between;*/
  41. /*align-content: space-around;*/
  42. align-content:space-evenly;
  43. }
  44. </style>
  45. </head>
  46. <body>
  47. <div class="container">
  48. <span class="item">1</span>
  49. <span class="item">2</span>
  50. <span class="item">3</span>
  51. <span class="item">4</span>
  52. <span class="item">5</span>
  53. <span class="item">6</span>
  54. <span class="item">7</span>
  55. <span class="item">8</span>
  56. </div>
  57. </body>
  58. </html>

运行依次部分效果展示

flex-direction:row; flex默认容器中主轴的方向,从左到右,水平方向


flex-direction:column; 设置容器中主轴的方向为垂直方向,从上到下


当flex项目一行排不下时,项目会跟随浏览器的是自动缩放,宽度发生改变

flex-wrap: wrap; 保持原有flex项目宽度不变,允许创建多行容器

justify-content:flex-end; 设置项目在主轴上的对齐方式,从右到左

justify-content:center; 设置项目在主轴上的对齐方式,水平居中对齐

justify-content:space-between; 两端对齐分配主轴上的剩余空间

justify-content:space-around;; 分散对齐分配主轴上的剩余空间

justify-content:space-evenly; 平均对齐分配主轴上的剩余空间

align-items:center; 交叉轴上项目对齐方式,垂直居中对齐

针对20日资讯站头部布局作业总结与分析

  • 做的时候没有对布局进行分析,随机性没有条理性。并没有对代码中适当加入注释,加入后一看一目了然是做的什么。

  • class命名关键词中间用连接线(index-header)比用下划线(index_header)更好,css中属性都是用的连接线,而不是下划线,应遵循基本惯例。取名相当随意,并没有考虑到语义化。

  • 搜索框部分,并没有将搜索图标与搜索框连接起来,点击无法实现焦点到搜索框功能,用户体验上差。

  • 布局采用float来实现效果,position只用到搜索图标部分。在能用定位的时候,尽可能不要用浮动。幻灯图片和广告部分没有考虑要实现链接跳转,只做了纯图片。轮廓线outline能让布局看着更加灵活,查看和校对更加方便。

  • 输入框的选择,使用属性选择器input[type=“search”]直观表达出,这里选中的是什么内容,相邻选择器(input[type=”search”]+lable)。
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