这是我参与8月更文挑战的第9天,活动详情查看:8月更文挑战
flex简介
- flex是个简写属性(像border也是个简写属性),在一个声明里设置
flex-grow
、flex-shrink
和flex-basis
属性,用以设置或检索弹性盒模型对象的子元素如何分配空间。- 注:如果元素不是"弹性盒模型对象的子元素",则 flex 属性不起作用。(弹性盒模型对象,即声明了
display:flex
或display: inline-flex
的元素,这个元素被称为伸缩容器)
- 注:如果元素不是"弹性盒模型对象的子元素",则 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之和)*剩余空间
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布局思维导图