菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 前端-王卓凡-20230427 [打印本页]

---

作者: 王卓凡    时间: 2023-4-27 00:06
标题: 前端-王卓凡-20230427


今天所学内容：
流式布局

• 概念
  
  
  • 流式布局就是百分比布局，也叫做非固定像素布局
  • 通过盒子的宽度设置为百分比来根据屏幕的宽度来自适应调整，不受固定像素的限制。
    
    
• 二倍精灵图的使用
  
  
  • 1、插入背景图
  • 2、将背景图按物理像素比进行等比例缩小（利用background-size属性）
  • 3、利用ps进行缩小后的图片测量，使用background-position进行背景位移即可
  • 例
    
    
  
  

Fiex弹性布局lex布局的原理

• 传统布局和flex布局的区别
  
  
  • 传统布局
    
    
    • 传统布局的兼容性更好
    • 布局会比较的繁琐
    • 局限性，在移动端中布局的速度相对较慢
      
      
  • flex布局
    
    
    • 操作会比较的方便，布局很简单，移动端使用很广泛
    • PC端的浏览器可能会有兼容性的问题，IE11以下的低版本浏览器对flex支持情况不好
      
      
  • 总结
    
    
    • PC端布局主要采用传统方式
    • 移动端布局或者PC端不考虑兼容性的时候，使用flex布局
      
      
    
    
  
  

原理

• flex 是弹性布局的意思，用来为盒子模型提供最大的灵活性，任何一个容器都可以指定为flex布局
• 当我们的父盒子设置为flex布局之后，子元素里面的float、clear和vertical-align属性都将失效
• 采用flex布局的父元素叫做flex容器（flex-container），子元素叫做flex项目（flex-item）
  
  

Flex布局的父项常见属性flex-direction

• 设置主轴方向
• 常用属性值
  
  
  • row  默认值，子元素沿x轴从左向右排列
  • row-reverse 子元素沿x轴从右向左进行排列
  • column 子元素沿y轴从上到下进行排列
  • column-reverse 子元素沿y轴从下到上进行排列
    
    
• 例
• 在flex布局中x轴和y轴分别是水平向右和垂直向下的
• x轴是默认的主轴，如果想将y轴设置为主轴，就可以使用flex-direction 属性
  
  

justify-content

• 控制主轴子元素的排列方式
• 常用属性值
  
  
  • flex-start 默认值，控制子元素沿主轴头部开始排列，如果主轴是x轴，就代表从左到右
  • flex-end 控制子元素沿主轴的尾部开始排列，如果是y轴，代表从下往上
  • center 控制子元素沿主轴居中对齐
  • space-around 控制子元素平分主轴剩余空间
  • space-between 控制子元素两侧元素先贴边，然后剩余的元素平分主轴剩余空间
    
    
• 例
  
  

flex-wrap

• 设置子元素是否换行
• 在flex布局中，子元素超过父元素的宽度默认是不换行，如果需要换行就要用该属性来进行设置
• 例
  
  

align-items

• 设置主轴的子元素排列方式（单行）
• 常用属性值
  
  
  • flex-start 从侧轴头部开始排列
  • flex-end 从侧轴尾部开始排列
  • center 沿侧轴居中排列
  • stretch 拉伸子元素到父级的宽度或高度（和主轴方向相关）
    
    
• 例
  
  

align-content

• 设置侧轴上的子元素的排列方式（多行）
• 常用属性值
  
  
  • align-content: flex-start;
    
    
    • 默认值：沿侧轴头部开始排列
      
      
  • align-content: flex-end;
    
    
    • 沿侧轴尾部开始排列
      
      
  • align-content: center;
    
    
    • 沿侧轴居中对齐
      
      
  • align-content: space-around;
    
    
    • 侧轴上的多行子元素平分侧轴剩余空间
      
      
  • align-content: space-between;
    
    
    • 侧轴上的多行子元素两侧先沿侧轴贴边，剩余的子元素平分侧轴剩余空间
      
      
  • align-content: stretch;
    
    
    • 侧轴上的子元素拉伸到平分父级高度或宽度（与主轴方向相关）
      
      
    
    
• 例
• aligin-items和align-content的区别
  
  
  • algin-items适用于单行的情况，只有上对齐、下对齐、居中对齐和拉伸。
  • algin-content 适用于多行的情况，可以设置上对齐、下对齐、居中对齐、拉伸、平分空间等属性值。
    
    
  flex-flow
  • 是flex-direction flex-wrap的复合属性
  • 属性值：flex-direction flex-wrap
  • 例
    
    
  
  

Flex布局常见子项属性

• flex子项占的份数
  
  
  • 例
    
    
• align-self 控制子项自己在侧轴上的排列方式
  
  
  • 可以控制单个子元素和其他的子元素有不同的对齐方式 ，可以覆盖align-items属性。
  • 例
    
    
• order 属性来定义子项的排列顺序
  
  
  • 默认值是0 数值越小越靠前
  • 遇到的问题：无
    
    
  
  

---

欢迎光临 菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)

Powered by Discuz! X3.4