一、flex项目上的6个属性

![]！

1.项目宽度：项目在分派主轴剩余空间之前，项目所占的主轴空间的宽度

        auto是项目原始宽度
        flex-basis: auto;
        当前项目有两个宽度：显示宽度 flex-basis，原始宽度：=width
        flex-basis: > width;
        flex-basis: 80px;
        flex-basis: 30%;
        min-width: 150px;

2.项目扩展：将主轴上的剩余空间按比例分配给项目

        flex-grow: ;空间分配比例
        flex-grow: 0;
        flex-grow: 1;

3.项目的收缩：将项目上的多余空间按比例进行缩小

       默认值为1：空间不做时按比例进行缩小
       flex-shrink: 1;

4.flex：将flex-grow flex-shrind flex-basis

      默认值：不扩展，自动收缩，宽度自动
      flex: 0 1 auto;
      flex: auto=flex:1 1 auto;
      flex: auto;
      完全失去弹性
      flex: none=flex:0 0 auto
      flex: none;
      flex: 2=flex:1 1 0;
      flex: 2;

5.align-self:单独自定义某个交叉轴上的对齐方式

     align-self: flex-start;  起始端对齐
     align-self: flex-end;    结束端对齐

6.order:自定义项目在主轴上的排列顺序，默认为0，书写顺序数字越小越靠前

二、页面组件开发的思路与实现过程

（一）页面组件的开发思路
1、首先先要把网站拆分成不同的组件。如：头部、正文、左边、右边、底部。
2、寻找需要用到的素材。
3、依次制作需要用的网站组件
4、进行组合

（二）实现过程
1、整理素材和网站架构
2、编写公共组件
3、编写不同组件的html和css。
4、编写专用组件
5、套用公共组件和专用组件
6、检查效果进行微调。

三、导航代码

<!DOCTYPE html>

<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="index.css">
<title>导航与标题</title>
</head>

<div class="public-headline">
<span>二手交易</span>
</body>
</html>
一、index.css代码
/公共样式/
@import “public/public_resel.css”;

/头部样式/
@import “public/publix_header/public_header.css”;

/大标题样式/
@import “public/public_headline/public-headline.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;
}
三、头部代码
@import “../public_resel.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: #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;
}
四、大标题代码
@import “../public_resel.css”;

.public-headline{
padding: 30px;
text-align: center;
}
.public-headline span{
font-size: 30px;
font-weight: bolder;
padding-bottom: 7px;
border-bottom: 3px solid red;
}

1225作业

一、flex项目上的6个属性

二、页面组件开发的思路与实现过程

三、导航代码

相关文章