2019-12-25 flex容器项目上6个属性、组件开发思路及导航代码-PHP培训十期

1、可以应用到flex项目上的属性有哪些

flex-basis: 项目宽度: 项目分配主轴剩余空间之前, 项目所占据的主轴空间宽度
flex-grow: 项目的宽度扩展: 将主轴上的剩余空间按比例分配给指定项目
flex-shrink: 项目的宽度收缩: 将项目上多出空间按比例在项目间进行缩减
flex: 是上面三个属性的简化缩写: flex: flex-grow flex-shrink flex-basis
align-self: 单独自定义某个项目在交叉轴上的对齐方式
order: 自定义项目在主轴上的排列顺序,默认为0,书写顺序,值越小位置越靠前
总结：需注意使用flex容器内元素，即flex item的float，clear、vertical-align属性将失效。Flex交叉轴其实就是侧轴。

2、组件开发思路

第一：将网站公用的地方提取成立基础框架，也就是public部分；

第二：将网站页面板块单独编写成组件，也可以成为小页面，单独文件夹单独CSS样式单独HTML页面，样式名使用下划线’_’，页面元素类名使用中划线’-‘进行连接;

第三：网站每个页面组建时，灵活调用各个组件完成，减少页面的整体调整时间。

一个组件就是一个css样式表, 通过样式表,像搭积木一样将整个网页快速创建出来
一个以上的页面都会用到的组件
事先将他们先写好放入公共组件库,统一管理与调用

3.导航代码

```HTML Code
<!DOCTYPE html>

<body>

```CSS Code
/*导入元素的公共初始化样式表*/
@import url(../../public_reset.css);
/*全部头部导航*/
.public-header {
    height: 44px;
    background-color: black;
    padding: 0 20px;
    /*flex*/
    display: flex;
    /*水平不换行*/
    /*flex-flow: row nowrap;*/
}
.public-header a {
    line-height: 44px;
    color: #cccccc;
    padding: 0 10px;
}
.public-header > a:hover {
    background-color: #fff;
    color: black;
}
.public-header > span {
    margin-left: auto;
}
/*字体图标*/
.public-header > span i {
    font-size: 16px;
    color: #cccccc;
    padding-right: 10px;
}

1、 可以应用到flex项目上的属性有哪些

总结：需注意使用flex容器内元素，即flex item的float，clear、vertical-align属性将失效。Flex交叉轴其实就是侧轴。

2、组件开发思路

第一：将网站公用的地方提取成立基础框架，也就是public部分；

第二：将网站页面板块单独编写成组件，也可以成为小页面，单独文件夹单独CSS样式单独HTML页面，样式名使用下划线’_’，页面元素类名使用中划线’-‘进行连接;

第三：网站每个页面组建时，灵活调用各个组件完成，减少页面的整体调整时间。

3.导航代码

相关文章

1、可以应用到flex项目上的属性有哪些