深度解析布局利器---Flex布局
发布日期:2022-02-24 01:06:51 浏览次数:2 分类:技术文章

本文共 2605 字,大约阅读时间需要 8 分钟。

深度解析布局利器—Flex布局

前言

传统的网页布局是基于盒状模型的,即依赖于display属性+position属性+float属性。但是,这种方法的局限性和灵活性很差,稍有不慎,屏幕中的元素就会变得乱七八糟,使得用户难以进行页面的布局。这时,Flex(Flexible Box)布局便应运而生,它可以完整、简便、响应式地实现多种页面的布局,让用户真正成为页面布局的“主人”。


基本知识

  • 先举个例子:

         
            
          
           子元素1  
           
            子元素2  
            
             子元素3
            
           
          
         

    我们可以给父元素添加display: flex属性,这样就开启了Flex布局。而开启Flex布局的元素,就称为Flex容器(flex container), 简称“容器”,它的所有子元素自动成为容器成员,称为Flex项目(flex item), 简称“项目”,而弹性盒子就是由Flex容器Flex项目组成。

    .outside {  display: flex;}

    开启后如图所示:image-20210603112129710.png

  • flex布局示意图如下:

image-20210603115050534.png

容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end,项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size


Flex容器的属性

flex-wrap
  • 设置弹性元素是否在子元素中溢出时弹性容器自动换行

  • 属性:

    nowrap 默认值,元素不会自动换行 image-20210603125640839.png
    wrap 元素沿着辅轴方向自动换行 image-20210603125610063.png
    wrap-reverse 元素沿着辅轴反向换行 image-20210603125516871.png
  • .outside {
    flex-wrap: nowrap | wrap | wrap-reverse;  }

flex-direction
  • 指定容器中弹性元素的排列方式

  • 属性:

    row 默认值,弹性元素在容器中水平排列 image-20210603131843889.png
    row-reverse 弹性元素在容器中反向水平排列 image-20210603131920030.png
    column 弹性元素纵向排列 image-20210603131951505.png
    column-reverse 弹性元素反向纵向排列 image-20210603132021521.png
  • .outside {
    flex-direction: row | row-reverse | column | column-reverse;  }

justify-content
  • 设置主轴上的元素如何排列(即如何分配主轴上的空白空间)

  • 属性:

    flex-start 元素沿着主轴起边排列 image-20210603133014801.png
    flex-end 元素沿着主轴终边排列 image-20210603132951025.png
    center 元素居中排列 image-20210603133033552.png
    space-around 空白均匀分布到元素两侧 image-20210603133115168.png
    space-between 空白均匀分布到元素间 image-20210603133132552.png
    space-evenly 空白分布到元素的单侧 image-20210603133150169.png

flex-flow
  • 它是flex-direction属性和flex-wrap属性的简写形式,默认值是row nowrap

  • .outside {
    flex-flow: <‘flex-direction’> || <‘flex-wrap’>  }

align-items
  • 定义项目在交叉轴上如何对齐

  • 属性:

    stretch 默认值,将元素的长度设置为相同的值 image-20210603140640881.png
    flex-start 元素不会拉伸,沿着辅轴起边对齐 image-20210603141012697.png
    flex-end 沿着辅轴的终边对齐 image-20210603141031888.png
    center 居中对齐 image-20210603141048161.png
    baseline 基线对齐 image-20210603141012697.png
  • .outside {
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;  }

align-content
  • 用于修改flex-wrap属性的行为,但他不是设置弹性子元素的对齐,而是设置各个行的对齐

  • 属性:

    flex-start 与交叉轴的起点对齐 image-20210603144900079.png
    flex-end 与交叉轴的重点对齐 image-20210603144918643.png
    center 与交叉轴的中点对齐 image-20210603144933992.png
    space-between 与交叉轴两端对齐,轴线之间的间隔平均分布 image-20210603144955424.png
    space-around 每根轴线两侧的间隔相等 image-20210603145010292.png
    stretch 默认值,轴线占满整个交叉轴 image-20210603145112969.png
  • .outside {
    flex-wrap: wrap;
    align-content: stretch | flex-start | flex-end | center | space-between | space-around  }

Flex项目的属性

容器有自己的属性“特权”,那么项目也要有!


order
  • 用于设置弹性容器内弹性子元素的属性,语法为:

    order: 
         
  • integer用整数值来定义排列顺序,默认值为0,数值小的排在前面,可以取负值,例如:

    .inside2 {  order: -1;}
     //将第二个子元素排在最前面

image-20210603150056133.png


flex-shrink
  • 定义了项目的缩小比例,默认值为1, 如果空间不足,该项目会缩小,0表示不缩小,不能取负值

  • .inside2 {
    flex-shrink: 3;  }

image-20210603150824949.png


flex-basis
  • 定义了在分配多余空间之前,项目占据的主轴空间(main size),默认值为auto

  • .inside2 {
    flex-basis: 20px;  }

image-20210603151352245.png


flex-grow
  • 定义项目的放大比例,默认值为0

  • .inside2 {
    flex-grow: 2  }

image-20210603151646646.png


flex
  • 该属性是flex-grow、flex-shrink和flex-basis的简写,默认值为0 1 auto,后两个属性可选

  • .inside2 {
    flex: 0 1 auto;  }

align-self
  • 定义flex子项单独在侧轴(纵轴)方向上的对齐方式,默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch

  • .inside2 {
    align-self: auto | flex-start | flex-end | center | baseline | stretch;  }
  • 属性中除了auto,其他用法和align-items相同


感谢您的观看!

转载地址:https://blog.csdn.net/weixin_45877762/article/details/118208407 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:RestTemplate模拟HTTP请求-跨项目调用接口的工具类
下一篇:Vue笔记整理(一)

发表评论

最新留言

关注你微信了!
[***.89.197.168]2022年05月22日 08时58分47秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

最新文章

vue前端_8.1 SRE 要懂点前端vue 2022-02-03
linux系统mysql入侵_Linux高级入侵检测-文件系统完整性 2022-02-03
mysql 唯一索引出现重复数据_mysql使用唯一索引避免插入重复数据 2022-02-03
mysql实现评论盖楼的sql_mysql - 网易的评论盖楼设计,用php的话,应该怎样实现?怎样存入数据库?... 2022-02-03
java多线程生产者消费者问题_java多线程解决生产者消费者问题 2022-02-03
c 批量更新mysql数据库_MySql批量更新方式大全 2022-02-03
autowarid和resources_ÂÐÏØÈË´ó 2022-02-03
python函数的定义教程_Python函数定义、函数调用详解 2022-02-03
python合并相同索引列表_python – 按行和相同的索引pandas合并两个数据帧 2022-02-03
ssis抽MySQL数据_微软SSIS部署抽取数据的包报错 2019-12-01 15:24:34
whmcs 添加域名_WHMCS域名更换教程 2019-12-01 15:24:34
vue监听值有变化后调用接口_探索 Vue.js 响应式原理 2019-12-01 15:24:34
mysql数据库环境安装配置_windows环境安装配置MySQL数据库 2019-12-01 15:24:34
mysql 索引缓存_MySQL之变量、查询缓存和索引 2019-12-01 15:24:31
mysql建表规定年龄范围_MySQL建表规则 2019-12-01 15:24:32
mysql memcache 一键_NGINX + PHP + MySQL + Memcache 一键启动脚本(.bat + shell) 2019-12-01 15:24:32
mysql语法检查工具_sql语法分析器(sql语法分析工具) 2019-12-01 15:24:32
webpy mysql_webpy使用mysql数据库操作(web.database) 2019-12-01 15:24:33
golang mysql 简书_golang实现mysql数据库备份-Go语言中文社区 2019-12-01 15:24:33
近期你已授权登录过腾讯文档 自动登录中_JustAuth发布1.13.2版本,新增微信公众平台的授权登录... 2019-12-01 15:24:33