12月25日学号：478291 Flex弹性布局

项目对应的属性

剩余空间
flex_basic：项目在分配主轴剩余空间之前，项目所在的主轴空间的宽度，即项目的显示宽度（width属性设置的是项目的原始宽度）

序号	属性值	描述
1.	数值（像素值或百分比）	具体的显示宽度。设置为百分比时，表示相较于父元素的宽度值
2.	`auto`	保持项目的原始宽度

注：显示宽度的优先级大于原始的宽度，设置最小宽度min-width属性时，原始宽度失效

flow-grow：将主轴上的剩余空间按比例分配给项目

序号	属性值	描述
1.	0	默认值，不分配空间
2.	1	按照项目数量1：1的比例平均分配

注：该属性值基本在0~1之间

flex-shrink：将容器多余的空间按照比例在项目之间进行分配（缩减）

序号	属性值	描述
1.	1	默认值，空间不足时按照比例缩小
2.	0	不进行收缩

flex：flow-grow、flex-shrink、flex_basic三个属性的缩写，属性值按照该顺序进行排列

序号	属性值	描述
1.	0 1 auto	不扩展，允许自动收缩，原始宽度
2.	intial = 0 1 auto	默认值
3.	auto = 1 1 auto	允许扩展，允许自动收缩，原始宽度
4.	none = 0 0 auto	不扩展，不收缩
5.	2 = 1 1 0 = 1 1 auto	允许扩展，允许自动收缩，原始宽度
6.	1	当前项目占据容器剩余的所有空间

align-self：单独定义当前项目在交叉轴上的对齐方法

序号	属性值	描述
1.	flex-start	默认值，顶部对齐
2.	flex-end	底部对齐

order：自定义项目在主轴中的排列顺序，数值越小位置越靠前

组件：一个组件就是一个CSS的样式表，能够快速的创建一个HTML页面

开发思路与设计过程：

定义统一的命名规范，确保组件的class名不会重复，还要考虑组件之间的冲突性
对页面进行区域的划分，细分每个组件所在区域以及展示的内容、样式（可以从布局、功能等方面进行分析划分）
区分组件的类型：公共组件还是专有组件，划分文件夹存放相应的css内容
首先定义整个页面的统一样式（基础元素样式、基础布局样式、基础功能等等），如：a、body，在每个组件的样式表中进行引用
创建组件对应的HTML文件以及CSS文件，HTML定义组件页面的元素，CSS定义组件的样式

使用时，通过@import "CSS文件路径"或@import url(CSS文件路径)
导航组件编写代码如下：
HTML代码：

<!-- header_nav.html -->
<!DOCTYPE html>
<html>
<head>
  <title>导航组件</title>
  <link rel="stylesheet" type="text/css" href="header_nav.css">
</head>
<body>
  <div class="header_nav">
      <span class="header_nav_link">
          <a href="#">网站首页</a>
          <a href="#">专题</a>
          <a href="#">网页导航</a>
          <a href="#">二手商品</a>
          <a href="#">讨论区</a>
      </span>
      <span class="header_nav_icon">
          <a href="#">
              <i class="iconfont icon-huiyuan2">登录</i>
          </a>
          <a href="#">免费注册</a>
      </span>
  </div>
</body>
</html>

CSS代码：

/*public.css*/
 *{
     padding:0;
     margin:0;
 }
 a{
     text-decoration: none;
 }
 /*header_nav.css*/
@import url(../../css/iconfont.css);
@import url(../public/public.css);
.header_nav{
    display: flex;
    flex-flow: row;
    background-color: black;
    height:40px;
    line-height: 40px;
}
.header_nav > .header_nav_link a{
    color:#fff;
    padding:0 15px;
    display: inline-block;
    height: 40px;
}
.header_nav > .header_nav_link a:hover{
    color:#555;
    height:40px;
    padding:0 15px;
    background-color: #fff;
}
.header_nav > .header_nav_icon{
    margin-left: auto;
}
.header_nav > .header_nav_icon a{
    color:#fff;
    padding:0 15px;
}

运行结果：

12月25日 学号：478291 Flex弹性布局

项目对应的属性

组件：一个组件就是一个CSS的样式表，能够快速的创建一个HTML页面

相关文章