Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 12月25日 学号：478291 Flex弹性布局
Blogger Information
Blog 24
fans 4
comment 0
visits 20117
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
12月25日 学号：478291 Flex弹性布局
Lin__
Original
686 people have browsed it

项目对应的属性

  • 剩余空间
  • 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代码：
    1. <!-- header_nav.html -->
    2. <!DOCTYPE html>
    3. <html>
    4. <head>
    5.   <title>导航组件</title>
    6.   <link rel="stylesheet" type="text/css" href="header_nav.css">
    7. </head>
    8. <body>
    9.   <div class="header_nav">
    10.       <span class="header_nav_link">
    11.           <a href="#">网站首页</a>
    12.           <a href="#">专题</a>
    13.           <a href="#">网页导航</a>
    14.           <a href="#">二手商品</a>
    15.           <a href="#">讨论区</a>
    16.       </span>
    17.       <span class="header_nav_icon">
    18.           <a href="#">
    19.               <i class="iconfont icon-huiyuan2">登录</i>
    20.           </a>
    21.           <a href="#">免费注册</a>
    22.       </span>
    23.   </div>
    24. </body>
    25. </html>

CSS代码：

  1. /*public.css*/
  2.  *{
  3.      padding:0;
  4.      margin:0;
  5.  }
  6.  a{
  7.      text-decoration: none;
  8.  }
  9.  /*header_nav.css*/
  10. @import url(../../css/iconfont.css);
  11. @import url(../public/public.css);
  13. .header_nav{
  14.     display: flex;
  15.     flex-flow: row;
  16.     background-color: black;
  17.     height:40px;
  18.     line-height: 40px;
  19. }
  21. .header_nav > .header_nav_link a{
  22.     color:#fff;
  23.     padding:0 15px;
  24.     display: inline-block;
  25.     height: 40px;
  26. }
  28. .header_nav > .header_nav_link a:hover{
  29.     color:#555;
  30.     height:40px;
  31.     padding:0 15px;
  32.     background-color: #fff;
  33. }
  35. .header_nav > .header_nav_icon{
  36.     margin-left: auto;
  37. }
  39. .header_nav > .header_nav_icon a{
  40.     color:#fff;
  41.     padding:0 15px;
  42. }

运行结果：

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：用表格来整理学习笔记 , 是非常不错的方案, 一目了然, 也好记忆
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post