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

flex简介

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

常见定义形式

• 先列举看几种定义形式对应的关系，[参考链接，但是这个链接里是有错误的，对应关系以我的为准]，未定义的子属性就是子属性本身的默认值

  定义flex	描述	flex-grow	flex-shrink	flex-basis
  initial 默认值	=>	0	1	auto
  flex:inherit	从父元素继承 =>	继承父	继承父	继承父
  flex:auto	=>	1	1	auto
  flex:none	=>	0	0	auto
  flex:none	=>	0	0	auto
  flex:非负数字x	视为 flex-grow 值 =>	x	1	auto
  flex:一个长度或百分比z	视为 flex-basis 值 =>	0	1	z
  flex:两个非负数字x,y	依次视为 flex-grow 和 flex-shrink 的值 =>	x	y	auto
  flex:一个非负数字和一个长度或百分比x,z	依次视为 flex-grow 和 flex-basis 的值 =>	x	1	z
  flex:两个非负数字x,y 一个长度或百分比z	依次视为三个属性的值 =>	x	y	z

属性详解+示例

依照菜鸟教程演示编写

flex-grow

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

---

欢迎加入QQ群交流： [游戏-Web-开发技术栈 ☄️] '300567032’
点击下方图标一键加入！

---

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-width和max-width可以限制flex子元素伸缩的下限和上限
• 注意：一旦设置了flex-grow或flex-shrink，那么flex子元素里的width、flex-basis，都是收缩或扩大的基准值。
  • 如果内容宽度小于设定的flex-basis或width，那么实际宽度就是设定的值。
  • 如果内容的宽大于设定的flex-basis或width，那么并不能起到设置宽度的作用。

常见用法

• 假设场景如下图：在一个flex容器中，标题和价格要上-空白-下的布局
  
• 这时应该这么写

  .goods-info {		
  	display: flex;
  	align-content: space-between;
  	flex-wrap: wrap;
  	
  	.top{
  	}
  	.low {
  	}
  }
  

• 但如果是这种情况，内容太少，达不到换行的要求。就会出现下面的情况
  
• 解决办法就是利用flex-basis或width

  .goods-info {		
  	display: flex;
  	align-content: space-between;
  	flex-wrap: wrap;
  	
  	.top{
  	}
  	.low {
  		flex-basis:100%; 
  		//或;
  		width:100%;
  	}
  }
  

[附] flex布局思维导图

---

欢迎加入QQ群交流： [游戏-Web-开发技术栈 ☄️] '300567032’
点击下方图标一键加入！

---