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

子元素（item）的属性

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex item属性</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            width: 400px;
            height: 100px;
            border: 1px dashed;
            background-color: #cccccc;
            display: flex;
        }
        /*flex 弹性盒子的 子元素（item/项目）的属性*/
        .container >.item{
            width: 100px;
            height: 30px;
            border: 1px dashed red;
            background-color: wheat;
        }
        /* 1- 在容器中使用 order 属性，控制子元素（item）的排列先后顺序；*/
        .container >:first-child{
            order: 3;
        }
        .container >:last-child{
            order: 1;
        }
        /* 2- 在容器中使用，align-self 属性，单独自定义某一个子元素，在交叉轴上的对齐方式；*/
        .container >:nth-child(2){
            align-self: flex-end;
            background-color: #9a6e3a;
        }
        /*3- 子元素（item/项目）中，关于剩余空间部分的属性中。*/
        /*3.1 flex-basis ，子元素（item),在分配主轴剩余空间之前的“基础宽度”
            默认值：flex-basis：auto,也就是显示宽度是“原始的宽度值： .container >.item{ width: 100px; }”；
            flex-basis:80px ,重新定义，子元素的显示宽度；
            flex-basis:20% ,
            min-width:120px ,子元素（item）的最小宽度；
        */
        .container >.item{
            flex-basis: 30%;
            min-width: 120px;
        }
         /*3.2 flex-grow ，表示是否允许子元素（item)沿着主轴方向,以 flex-basis 属性为基础进行扩展。
            并且，规定将主轴剩余空间分配到项目上的比例；
            默认值：flex-grow：0 ，不允许扩展；
            若 flex-grow：1 ，则表示将剩余空间平局分配给各个子元素（item）；
            若 flex-grow:0.2 ,则表示将余空间的20%，分别增加给子元素；
         */
        .container >.item{
            flex-grow: 1;
        }
         /*3.3 flex-shrink ，与flex-grow雷同，只不过是控制子元素沿主轴方向，以flex-basis 属性为基础进行收缩。
            需要注意的是，在进行收缩的时候，需要考虑最小宽度，并且只有当子元素的宽度总和超出容器宽度时，才能起效；
            默认值：flex-shrink：1 ，
            flex-shrink 不接受负值；
            flex-shrink :0 ,表示不进行收缩；
         */
        .container >.item{
            flex-shrink: 1;
        }
         /*3.4 简写 flex: flex-grow flex-shrink flex-basis，
         默认值：flex:0(不扩展） 1（可收缩） auto（自适应宽度）；
         */
        .container >.item{
            /*flex:auto 等价于 flex:1 1 auto ，表示【可扩展，可收缩，自适应宽度】
                flex:2 等价于 flex:1 1 auto ，表示【可扩展，可收缩，自适应宽度】
                flex:none 等价于 flex:0 0 auto ,表示【不可扩展 不可收缩，自适应宽度】
            */
            flex:auto;
        }
    </style>
</head>
<body>
<div class="container">
    <span class="item">1</span>
    <span class="item">2</span>
    <span class="item">3</span>
</div>
</body>
</html>

抄写

前端组件开发

效果与目录结构

效果

HTML代码

index.html 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件页面练习</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
<!--页面头部组件-->
<div class="public-header">
    <a href="">网站首页</a>
    <a href="">专题</a>
    <a href="">网站导航</a>
    <a href="">二手商品</a>
    <a href="">讨论区</a>
    <span>
        <a href=""><i class="iconfont">&#xe60e;</i>登录</a>
        <a href="">免费注册</a>
    </span>
</div>
<!--页面标题组件-->
<div class="public-headline">
    <span>二手拍卖</span>
</div>
</body>
</html>

CSS代码

公共样式初始化文件 public_reset.css

/*引入字体图标库*/
@font-face {
    font-family: 'iconfont';
    src: url('../../../1220/css/font/iconfont.eot');
    src: url('../../../1220/css/font/iconfont.eot?#iefix') format('embedded-opentype'),
    url('../../../1220/css/font/iconfont.woff2') format('woff2'),
    url('../../../1220/css/font/iconfont.woff') format('woff'),
    url('../../../1220/css/font/iconfont.ttf') format('truetype'),
    url('../../../1220/css/font/iconfont.svg#iconfont') format('svg');
}
.iconfont {
    font-family: "iconfont", serif !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/*所有页面初始化样式设置*/
*{
    margin: 0;
    padding: 0;
    /*调试参考线*/
   /* outline: 1px dashed red;*/
}
body{
    font-size: 13px;
    color: #555555;
    background-color: #efefef;
}
a{
    font-size: 13px;
    color: #404040;
    /*去掉超链接下划线*/
    text-decoration: none;
}
li{
    list-style: none;
}

公共头部样式文件 public_header.css

/*引入公共初始化标签样式文件*/
@import "public_reset.css";
/*头部*/
.public-header{
    height: 44px;
    background-color: black;
    padding: 0 20px;
    /*转化为弹性盒子容器*/
    display: flex;
    flex-flow: row nowrap;
}
/*统一设置容器下的 a 标签项目*/
.public-header >a{
    line-height: 44px;
    text-align: center;
    padding: 0 10px;
    color: #cccccc;
}
.public-header >a:hover{
    background-color: #fff;
    color: black;
}
/*头部右侧内容 right*/
.public-header >span{
    line-height: 44px;
    text-align: center;
    margin-left: auto;
}
.public-header >span a{
    color: #cccccc;
    padding: 0 10px;
}
/*设置右侧登录图标*/
.public-header >span a i{
    font-size: 16px;
    color: #cccccc;
    padding-right: 10px;
}

公共头部样式文件 public_headline.css

/*引入公共初始化标签样式文件*/
@import "public_reset.css";
.public-headline{
    padding: 30px;
    text-align: center;
}
.public-headline >span{
    font-size: 30px;
    /*字体粗体样式*/
    font-weight: bolder;
    padding-bottom: 7px;
    border-bottom: 3px solid red;
}

页面专用的样式文件 index.css

@import "Components/public/public_reset.css";
@import "Components/public/public_header.css";
@import "Components/public/public_headline.css";

组件开发感受

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

flex布局，子元素（item）的属性，以及前端组件开发初尝试--PHP培训十期线上班

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

子元素（item）的属性

前端组件开发

效果与目录结构

HTML代码

CSS代码

组件开发感受

相关文章