一、组件化开发（components）小结：
1.组件化开发就是把一个页面拆分成最小的功能块，在写网页是再通过把各个功能块组装起来构成页面。这样可以减少重复工作。
2.组件化开发注意点：对文件夹的管理，文件的命名注意，比较容易记忆，这样再以后利用是可以快速找到文件；
编程约定，@import语法实现页面的组装；
是一个组件必须使用一个独立无二的类名class。
最大的意义在于他的复用性
二、Flex弹性盒子元素的六个属性
.item{flex-basis:<legth>; /*可以是数值和百分比*/flex-basis:auto; /*默认值，原始宽度*/}
.item{flex-grow:<number>; /*放大的数值，默认值是0*/}
.item{flex-shrink:<mumber>;/*缩小的数值，默认值是1*/}
flex:0 1 auto; 等价于 flex:initial;flex:auto; 等价于 flex:1 1 auto; 等价于 flex:2;flex:none; 等价于 flex:0 0 auto;
.item{order:<integer>; /*排列数值，默认值为0*/}
6.
align-self属性定义了单个项目再纵轴上的对齐方式，可以覆盖align-items定义的属性，默认值为auto即继承父元素的align-items属性，如果没有父元素，等同于stretch。
.tiem{align-self:auto; /*默认值，继承父元素align-items属性*/align-self:flex-start; /*交叉轴开始对齐*/align-self:flex-end; /*交叉轴结束对齐*/align-self:center; /*交叉轴中间对齐*/align-self:baseline; /*交叉轴第一列基线*/align-self:stretch; /*项目的边距盒的尺寸尽可能接近所在行的尺寸*/}
三、默写组件开发头部代码
*{margin:0;padding:0;outline: 1px dashed red;}body{font-size: 13px;color:#555;background-color:#efefef;}a{color:#404040;text-decoration:none;font-size:13px;}li {list-style:none;}
@import url(../../public_reset.css);.public-header{height:44px;background-color:000;padding:0 20px;display:flex;flex-flow: row nowrap;}.public-header a{line-height:44px;color:#ccc;padding:0 10px;}.public-header > a:hover{background-color:#fff;color:#000;}.public-header > span{margin-left:auto;}.public-header > span > a > i{font-size:16px;color:#ccc;padding-right:10px;}
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><link rel="stylesheet" href="../../static/font/iconfont.css"><link rel="stylesheet" href="./public_header.css"><title>头部导航</title></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 icon-huiyuan2"></i>登录</a><a href="">网站首页</a></span></div></body></html>
