![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
天蓬老师Correction status：qualified
Teacher's comments：flex属性很多, 常用的不多, 其它项目属性, 我平时几乎只会用到flex, 但其它的属性也要有所了解的
Collection
Collection
Flex项目的属性有6个，分别是flex-basis、flex-grow、flex-shrink、flex、ailgn-self、order，将其功能和可选值整理成以下图片（偷个懒，这里就不码了）：
组件开发大体的步骤就是将网站分成多个组件，然后先将一个个组件实现起来，最后将组件组装成网页。组件的实现过程主要是将用一个html和css文件写出一个页面，这些文件放在一个文件夹内，该文件加可以称为组件，如文件夹命名为header，则该组件可称为网站的header组件。不过需要注意的是文件的命名需统一规范。
<!DOCTYPE html><html lang="zh-CN"><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>
/*引入样式重置*/@import "../../common/reset.css";/*公共头部*/.public-header {height: 44px;line-height: 44px;padding: 0 20px;background-color: black;display: flex;}.public-header a{color: white;padding: 0 10px;}.public-header > a:hover{color: black;background-color: white;}.public-header > span {margin-left: auto;}.public-header > span i{margin-right: 5px;}
天蓬老师