Flex布局:flex属性详解 (flex和flex-grow的区别?)

1,666 阅读4分钟

这是我参与8月更文挑战的第9天,活动详情查看:8月更文挑战

flex简介

  • flex是个简写属性(像border也是个简写属性),在一个声明里设置 flex-growflex-shrinkflex-basis 属性,用以设置或检索弹性盒模型对象的子元素如何分配空间。
    • 注:如果元素不是"弹性盒模型对象的子元素",则 flex 属性不起作用。(弹性盒模型对象,即声明了display:flexdisplay: inline-flex的元素,这个元素被称为伸缩容器)

常见定义形式

  • 先列举看几种定义形式对应的关系,[参考链接,但是这个链接里是有错误的,对应关系以我的为准],未定义的子属性就是子属性本身的默认值
    定义flex描述flex-growflex-shrinkflex-basis
    initial 默认值=>01auto
    flex:inherit从父元素继承 =>继承父继承父继承父
    flex:auto=>11auto
    flex:none=>00auto
    flex:none=>00auto
    flex:非负数字x视为 flex-grow 值 =>x1auto
    flex:一个长度或百分比z视为 flex-basis 值 =>01z
    flex:两个非负数字x,y依次视为 flex-growflex-shrink 的值 =>xyauto
    flex:一个非负数字和一个长度或百分比x,z依次视为 flex-growflex-basis 的值 =>x1z
    flex:两个非负数字x,y 一个长度或百分比z依次视为三个属性的值 =>xyz

属性详解+示例

依照菜鸟教程演示编写

flex-grow

  • 定义项目的放大(扩展)比例,即定义对剩余空间(如果有的话)的分配。对弹性容器内的元素,在当前列除自身宽度之外若还有剩余空间,而设定的分配
    • 默认为0,即如果存在剩余空间,也不放大。
    • 如果所有项目的flex-grow属性都为1,则它们将等分剩余空间。
    • 如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。 在这里插入图片描述
    • 下面这个示例比较全面,自行观察flex-grow设置为1、3、0的区别;以及设置为0但有内容和无内容的区别。 在这里插入图片描述
    • 设置为小数时。挺有意思,其实每个子元素的算法是:(自身的flex-grow/各flex-grow之和)*剩余空间 在这里插入图片描述

flex-shrink

  • 定义项目的收缩比例:对弹性容器内的元素,如果所有子元素的宽的总和超过了弹性容器设定的宽width,那么该属性分配元素的收缩比例。
    • 默认为1,即每个子元素收缩比例相同,但不会忽略内容(如果元素中的内容超过了容器的宽,那么容器会被撑开)
    • 如果一个项目的flex-shrink属性为1,其他项目都为2,且所有项目的宽超过了容器设定的width,则所有项目的宽将在原基础进行收缩,后者进行收缩的量为前者的两倍。但是不会忽略内容,内容会占据实实在在的宽度 在这里插入图片描述

flex-basis

默认值auto,即项目本来的大小。(菜鸟教程)在这里插入图片描述

  • 和width不同。==flex-basis用于设置或检索弹性盒伸缩基准值==(菜鸟教程)。
  • 推荐这篇文章flex-basis表示在flex子元素 被放入flex容器之前的大小,==是子元素的理想或者假设大小但是并不是其真实大小==,其真实大小取决于flex容器的宽度、flex子元素的min-width,max-width等其他样式 在这里插入图片描述

flex-basis的应用准则

参考链接

  • Flex 子元素的应用准则:content –> width –> flex-basis (limted by max|min-width)
      • 如果没有设置flex-basis属性,那么flex-basis的大小就是项目的width属性的大小
      • 如果没有设置width属性,那么flex-basis的大小就是项目内容(content)的大小
  • ==min-widthmax-width可以限制flex子元素伸缩的下限和上限==
  • 注意:一旦设置了flex-growflex-shrink,那么flex子元素里的widthflex-basis,都是收缩或扩大的基准值。
    • 如果内容宽度小于设定的flex-basiswidth,那么实际宽度就是设定的值。
    • 如果内容的宽大于设定的flex-basiswidth,那么并不能起到设置宽度的作用。

常见用法

  • 假设场景如下图:在一个flex容器中,标题和价格要上-空白-下的布局 在这里插入图片描述
  • 这时应该这么写
    .goods-info {		
    	display: flex;
    	align-content: space-between;
    	flex-wrap: wrap;
    	
    	.top{
    	}
    	.low {
    	}
    }
    
  • 但如果是这种情况,内容太少,达不到换行的要求。就会出现下面的情况 在这里插入图片描述
  • 解决办法就是利用flex-basiswidth
    .goods-info {		
    	display: flex;
    	align-content: space-between;
    	flex-wrap: wrap;
    	
    	.top{
    	}
    	.low {
    		flex-basis:100%; 
    		//或;
    		width:100%;
    	}
    }
    

[附] flex布局思维导图

在这里插入图片描述 在这里插入图片描述