Community Learn Tools Library Leisure
search
English
Home > List of blog posts > flex布局，子元素（item）的属性，以及前端组件开发初尝试--PHP培训十期线上班
Blogger Information
Blog 22
fans 1
comment 1
visits 22217
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
flex布局，子元素（item）的属性，以及前端组件开发初尝试--PHP培训十期线上班
Miss灬懒虫
Original
1153 people have browsed it

flex布局，子元素（item）的属性，以及前端组件开发初尝试

子元素（item）的属性

  • order
  • align-self
  • flex-basis
  • flex-grow
  • flex-shrink
  • flex: flex-grow flex-shrink flex-basis

详细说明在注释哦！嘻嘻！

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>flex item属性</title>
  6.     <style>
  7.         *{
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  12.         .container{
  13.             width: 400px;
  14.             height: 100px;
  15.             border: 1px dashed;
  16.             background-color: #cccccc;
  17.             display: flex;
  18.         }
  20.         /*flex 弹性盒子的 子元素（item/项目）的属性*/
  21.         .container >.item{
  22.             width: 100px;
  23.             height: 30px;
  24.             border: 1px dashed red;
  25.             background-color: wheat;
  26.         }
  28.         /* 1- 在容器中使用 order 属性，控制子元素（item）的排列先后顺序；*/
  29.         .container >:first-child{
  30.             order: 3;
  31.         }
  32.         .container >:last-child{
  33.             order: 1;
  34.         }
  36.         /* 2- 在容器中使用，align-self 属性，单独自定义某一个子元素，在交叉轴上的对齐方式；*/
  37.         .container >:nth-child(2){
  38.             align-self: flex-end;
  39.             background-color: #9a6e3a;
  40.         }
  41.         /*3- 子元素（item/项目）中，关于剩余空间部分的属性中。*/
  42.         /*3.1 flex-basis ，子元素（item),在分配主轴剩余空间之前的“基础宽度”
  43.             默认值：flex-basis：auto,也就是显示宽度是“原始的宽度值： .container >.item{ width: 100px; }”；
  44.             flex-basis:80px ,重新定义，子元素的显示宽度；
  45.             flex-basis:20% ,
  46.             min-width:120px ,子元素（item）的最小宽度；
  47.         */
  48.         .container >.item{
  49.             flex-basis: 30%;
  50.             min-width: 120px;
  51.         }
  53.          /*3.2 flex-grow ，表示是否允许子元素（item)沿着主轴方向,以 flex-basis 属性为基础进行扩展。
  54.             并且，规定将主轴剩余空间分配到项目上的比例；
  55.             默认值：flex-grow：0 ，不允许扩展；
  56.             若 flex-grow：1 ，则表示将剩余空间平局分配给各个子元素（item）；
  57.             若 flex-grow:0.2 ,则表示将余空间的20%，分别增加给子元素；
  58.          */
  59.         .container >.item{
  60.             flex-grow: 1;
  61.         }
  63.          /*3.3 flex-shrink ，与flex-grow雷同，只不过是控制子元素沿主轴方向，以flex-basis 属性为基础进行收缩。
  64.             需要注意的是，在进行收缩的时候，需要考虑最小宽度，并且只有当子元素的宽度总和超出容器宽度时，才能起效；
  65.             默认值：flex-shrink：1 ，
  66.             flex-shrink 不接受负值；
  67.             flex-shrink :0 ,表示不进行收缩；
  68.          */
  69.         .container >.item{
  70.             flex-shrink: 1;
  71.         }
  73.          /*3.4 简写 flex: flex-grow flex-shrink flex-basis，
  74.          默认值：flex:0(不扩展） 1（可收缩） auto（自适应宽度）；
  75.          */
  76.         .container >.item{
  77.             /*flex:auto 等价于 flex:1 1 auto ，表示【可扩展，可收缩，自适应宽度】
  78.                 flex:2 等价于 flex:1 1 auto ，表示【可扩展，可收缩，自适应宽度】
  79.                 flex:none 等价于 flex:0 0 auto ,表示【不可扩展 不可收缩，自适应宽度】
  80.             */
  81.             flex:auto;
  82.         }
  84.     </style>
  85. </head>
  86. <body>
  87. <div class="container">
  88.     <span class="item">1</span>
  89.     <span class="item">2</span>
  90.     <span class="item">3</span>
  91. </div>
  92. </body>
  93. </html>

抄写

前端组件开发

效果与目录结构

  • 效果

  • 目录结构

HTML代码

  • index.html 文件
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>组件页面练习</title>
  6.     <link rel="stylesheet" href="index.css">
  7. </head>
  8. <body>
  9. <!--页面头部组件-->
  10. <div class="public-header">
  11.     <a href="">网站首页</a>
  12.     <a href="">专题</a>
  13.     <a href="">网站导航</a>
  14.     <a href="">二手商品</a>
  15.     <a href="">讨论区</a>
  16.     <span>
  17.         <a href=""><i class="iconfont">&#xe60e;</i>登录</a>
  18.         <a href="">免费注册</a>
  19.     </span>
  20. </div>
  21. <!--页面标题组件-->
  22. <div class="public-headline">
  23.     <span>二手拍卖</span>
  24. </div>
  25. </body>
  26. </html>

CSS代码

  • 公共样式初始化文件 public_reset.css
  1. /*引入字体图标库*/
  2. @font-face {
  3.     font-family: 'iconfont';
  4.     src: url('../../../1220/css/font/iconfont.eot');
  5.     src: url('../../../1220/css/font/iconfont.eot?#iefix') format('embedded-opentype'),
  6.     url('../../../1220/css/font/iconfont.woff2') format('woff2'),
  7.     url('../../../1220/css/font/iconfont.woff') format('woff'),
  8.     url('../../../1220/css/font/iconfont.ttf') format('truetype'),
  9.     url('../../../1220/css/font/iconfont.svg#iconfont') format('svg');
  10. }
  11. .iconfont {
  12.     font-family: "iconfont", serif !important;
  13.     font-size: 16px;
  14.     font-style: normal;
  15.     -webkit-font-smoothing: antialiased;
  16.     -moz-osx-font-smoothing: grayscale;
  17. }
  19. /*所有页面初始化样式设置*/
  20. *{
  21.     margin: 0;
  22.     padding: 0;
  23.     /*调试参考线*/
  24.    /* outline: 1px dashed red;*/
  25. }
  26. body{
  27.     font-size: 13px;
  28.     color: #555555;
  29.     background-color: #efefef;
  30. }
  31. a{
  32.     font-size: 13px;
  33.     color: #404040;
  34.     /*去掉超链接下划线*/
  35.     text-decoration: none;
  36. }
  37. li{
  38.     list-style: none;
  39. }
  • 公共头部样式文件 public_header.css
  1. /*引入公共初始化标签样式文件*/
  2. @import "public_reset.css";
  4. /*头部*/
  5. .public-header{
  6.     height: 44px;
  7.     background-color: black;
  8.     padding: 0 20px;
  10.     /*转化为弹性盒子容器*/
  11.     display: flex;
  12.     flex-flow: row nowrap;
  13. }
  14. /*统一设置容器下的 a 标签项目*/
  15. .public-header >a{
  16.     line-height: 44px;
  17.     text-align: center;
  18.     padding: 0 10px;
  19.     color: #cccccc;
  20. }
  21. .public-header >a:hover{
  22.     background-color: #fff;
  23.     color: black;
  24. }
  26. /*头部右侧内容 right*/
  27. .public-header >span{
  28.     line-height: 44px;
  29.     text-align: center;
  30.     margin-left: auto;
  31. }
  32. .public-header >span a{
  33.     color: #cccccc;
  34.     padding: 0 10px;
  35. }
  36. /*设置右侧登录图标*/
  37. .public-header >span a i{
  38.     font-size: 16px;
  39.     color: #cccccc;
  40.     padding-right: 10px;
  41. }
  • 公共头部样式文件 public_headline.css
  1. /*引入公共初始化标签样式文件*/
  2. @import "public_reset.css";
  4. .public-headline{
  5.     padding: 30px;
  6.     text-align: center;
  7. }
  8. .public-headline >span{
  9.     font-size: 30px;
  11.     /*字体粗体样式*/
  12.     font-weight: bolder;
  13.     padding-bottom: 7px;
  14.     border-bottom: 3px solid red;
  15. }
  • 页面专用的样式文件 index.css
  1. @import "Components/public/public_reset.css";
  3. @import "Components/public/public_header.css";
  5. @import "Components/public/public_headline.css";

组件开发感受

1、需要较为清晰的将页面进行合理的拆分，以保障组件的复用性，复用性是组件开发最大的价值体现；
2、组件的命名要规范、清晰，并且具备很好的可读性，只有这样才能提高代码的可维护性，从而降低维护成本；
3、css的类名需要层级明确，防止因为意外的样式覆盖；

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