1225作业

复习：flex容器上使用的6个属性

flex-direction:设置容器的主轴方向，水平/垂直排列
flex-wrap:是否允许容器换行，默认不换行
flex-flow:主轴方向是否换行，简化flex-direction，flex-wrap属性
justify-cotent:设置flex项目在主轴上的对齐方式
align-items:设置flex项目在交叉轴上的对齐方式
align-conten:多行容器时，项目在交叉轴上的对齐方式
手写flex项目上的6个属性
flex-basis:设置项目宽度，项目在分配主轴剩余空间之前，项目所在的主轴空间的宽度，默认值auto
flex-grow:设置主轴剩余空间分配给项目的比例（0 不分配，1平均分配）
flex-shrink:项目的宽度收缩（将项目上的多出来的空间按比例在项目之间进行缩减）
flex:上面三项的简写
flex: flex-grow flex-shrink flex-basis(默认值：不扩展，自动收缩，宽度自动)
align-self:单独自定义某个项目在交叉轴上的对齐方式
order:自定义项目在主轴上的排列顺序，默认为0，值越小越靠前
公共组件：多个地方调用的组件，类似网站顶部导航栏等
专有组件：项目中只有一处使用的组件，定制化的组件
组件的开发思路与实现过程
1.首先判断组件的类型，该组件是公共组件还是专有组件？
2.组件的样式必须和主体隔离开，避免影响其他组件或主体的样式
4.使用时，在需要的地方复制组件的HTML，并在该页面中导入该组件对应的样式文件
写导航代码并提交到作业
reset.css 重置样式
```
{
margin: 0;
padding: 0;
}
body {
font-size: 13px;
color: #555;
background-color: #efefef;
}
a {
color: #404040;
text-decoration: none;
font-size: 13px;
}
li {
list-style: none;
}
```
**组件HTML**
```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="../../../../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>
```
组件样式
```css
/ 导入公共样式/
/@import “../../public_reset.css”;/
@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: #ccc;
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: #ccc;
padding-right: 10px;
}

```

手写flex项目上的6个属性

公共组件：多个地方调用的组件，类似网站顶部导航栏等

专有组件：项目中只有一处使用的组件，定制化的组件

组件的开发思路与实现过程

写导航代码并提交到作业

相关文章