flex项目上的6个属性：
页面组件开发的思路与实现过程
开发思路：把页面分割成相应的若干个部分进行分别完成，这样有利于代码的复用
实现过程：在文件中用@import引入需要使用的组件
导航代码
css样式初始化：
* {margin : 0;padding : 0;/*outline : 1px dashed red;*/}body {font-size : 13px;color : #555555;background-color : #efefef;}a {color : #404040;text-decoration : none;font-size : 13px;}li {list-style : none;}
全站的头部导航CSS代码：
@import "../public-reset.css";.public-header {height : 44px;background-color : black;padding : 0 20px;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;}
全站的头部导航HTML代码：
<!DOCTYPE html><html lang = "en"><head><meta charset = "UTF-8"><link rel = "stylesheet" href = "public-header.css"><link rel = "stylesheet" href = "../../../static/font/iconfont.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>
运行效果：