flex 弹性元素
1.flex-basis 元素在分配主轴剩余空间之前，在主轴上占据的宽度，默认值为 auto
2.flex-grow 元素宽度扩展，元素按主轴剩余空间的比例进行扩展，默认值为 0
3. flex-shrink 元素宽度收缩，元素按照主轴剩余空间的比例进行缩减，默认值为 1
4.flex 以上 3 个元素的合并简写，flex:flex-grow flex-shrink flex-basis，默认值为 0 1 auto
flex: 1; /* 相当于flex:1 1 auto;或flex:1 1 0;或flex:2; */
5.align-self 当前某个元素在交叉轴上的排列方式
align-self: flex-start; /* 元素位于容器交叉轴的起点 */align-self: flex-end; /* 元素位于容器交叉轴的终点 */align-self: center; /* 元素位于容器交叉轴的中心 */
6.order 元素在主轴上的排列顺序，值越小，顺序越靠前，默认值为 0
页面组件开发的思路与实现过程
一个页面分成若干个组件，分为可复用组件和专用组件，可复用组件如公共头部、公共底部等，而专用组件，顾名思义，针对性专门使用的组件，所有组件拼接起来形成一个完整页面
导航代码
html代码
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <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="">导航1</a> <a href="">导航2</a> <a href="">导航3</a> <a href="">导航4</a> <a href="">导航5</a> <a href="">导航6</a> <span> <a href=""><i class="icon iconfont icon-huiyuan1"></i>登陆</a> <a href=""> <i class="icon iconfont icon-shiyongwendang"></i> 注册 </a> </span> </div> </body></html>
/* 导入公共初始化样式 */@import "public_reset.css";.public-header { height: 44px; background-color: black; display: flex; flex-flow: row nowrap;}.public-header a { color: #ffffff; line-height: 44px; padding: 0 5px;}.public-header > a:hover { background-color: #ffffff; color: #333333;}.public-header > span { margin-left: auto;}.public-header > span i { padding-right: 5px;}
public_reset.css
* { margin: 0; padding: 0;}body { color: #000;}a { color: #000; text-decoration: none;}li { list-style: none;}
