12月25日学号：478291 Flex弹性布局 - HTML基础

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > 博客列表 > 12月25日学号：478291 Flex弹性布局

博主信息

博文 24

粉丝 4

访问量 26279

专题推荐

更多>

项目对应的属性

剩余空间
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;
}