特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)
到目前为止,Flexbox布局应该是目前最流行的布局方式之一了。而Flexbox布局的最大特性就是让Flex项目可伸缩,也就是让Flex项目的宽度和高度可以自动填充Flex容器剩余的空间或者缩小Flex项目适配Flex容器不足的宽度。而这一切都是依赖于Flexbox属性中的flex
属性来完成。一个Flex容器会等比的按照各Flex项目的扩展比率分配Flex容器剩余空间,也会按照收缩比率来缩小各Flex项目,以免Flex项目溢出Flex容器。但其中Flex项目又是如何计算呢?他和扩展比率或收缩比率之间又存在什么关系呢?在这篇文章中我们将一起来探来。
在Flexbox布局中,容器中显示式使用
display
设置为flex
或inline-flex
,那么该容器就是Flex容器,而该容器的所有子元素就是Flex项目。
简介
在这篇文章中,我们将要聊的是有关于flex
属性的事情,特别是如何使用该属性来计算Flex项目?在开始之前,先来简单的了解一下flex
属性。
在Flexbox中,flex
属性是flex-grow
(扩展比率)、flex-shrink
(收缩比率)和flex-basis
(伸缩基准)三个属性的简称。这三个属性可以控制一个Flex项目(也有人称为Flex元素),主要表现在以下几个方面:
flex-grow
:Flex项目的扩展比率,让Flex项目得到(伸张)多少Flex容器多余的空间(Positive free space)flex-shrink
:Flex项目收缩比率,让Flex项目减去Flex容器不足的空间(Negative free space)flex-basis
:Flex项目未扩展或收缩之前,它的大小是多少
在Flexbox布局中,只有充分理解了这三个属性才能彻底的掌握Flex项目是如何扩展和收缩的,也才能更彻底的掌握Flexbox布局。因此掌握这三个属性,以及他们之间的计算关系才是掌握Flexbox布局的关键所在。
相关概念
在具体介绍flex
相关的技术之前,先对几个概念进行描述,因为理解了这几个概念更有易于大家对后面知识的理解。
主轴长度和主轴长度属性
Flex项目在主轴方向的宽度或高度就是Flex项目的主轴长度,Flex项目的主轴长度属性是width
或height
属性,具体是哪一个属性,将会由主轴方向决定。
剩余空间和不足空间
在Flexbox布局中,Flex容器中包含一个或多个Flex项目(该容器的子元素或子节点)。Flex容器和Flex项目都有其自身的尺寸大小,那么就会有:Flex项目尺寸大小之和大于或小于Flex容器 情景:
- 当所有Flex项目尺寸大小之和小于Flex容器时,Flex容器就会有多余的空间没有被填充,那么这个空间就被称为Flex容器的剩余空间(Positive Free Space)
- 当所有Flex项目尺寸大小之和大于Flex容器时,Flex容器就没有足够的空间容纳所有Flex项目,那么多出来的这个空间就被称为负空间(Negative Free Space)
举个例子向大家阐述这两个情形:“假设我们有一个容器(Flex容器),显式的给其设置了width
为800px
,padding
为10px
,并且box-sizing
设置为border-box
”。根据CSS的盒模型原理,我们可以知道Flex容器的内宽度(Content盒子的宽度)为800px - 10px * 2 = 780px
:
假设Flex容器中包含了四个Flex项目,而且每个Flex项目的width
都为100px
,那么所有Flex项目的宽度总和则是100px * 4 = 400px
(Flex项目没有设置其他任何有关于盒模型的尺寸),那么Flex容器将会有剩余的空间出来,即780px - 400px = 380px
。这个380px
就是我们所说的Flex容器的剩余空间:
假设把Flex项目的width
从100px
调到300px
,那么所有Flex项目的宽度总和就变成了300px * 4 = 1200px
。这个时候Flex项目就溢出了Flex容器,这个溢出的宽度,即1200px - 780px = 420px
。这个420px
就是我们所说的Flex容器的不足空间:
上面演示的是主轴在
x
轴方向,如果主轴变成y
轴的方向,同样存在上述两种情形,只不过把width
变成了height
。接下来的内容中,如果没有特殊说明,那么所看到的示例都仅演示主轴在x
轴的方向,即flex-direction
为row
!
min-content 和 max-content
min-content
和max-content
是CSS中的一个新概念,隶属于CSS Intrinsic and Extrinsic Sizing Specification模块。简单的可以这么理解。
CSS可以给任何一个元素显式的通过width
属性指定元素内容区域的宽度,内容区域在元素padding
、border
和margin
里面。该属性也是CSS盒模型众多属性之一。
记住,CSS的
box-sizing
可以决定width
的计算方式。
如果我们显式设置width
为关键词auto
时,元素的width
将会根据元素自身的内容来决定宽度。而其中的min-content
和max-content
也会根据元素的内容来决定宽度,只不过和auto
有较大的差异
min-content
: 元素固有的最小宽度(内容)max-content
: 元素固有的最大宽度(内容)
比如下面这个示例:
如果内容是英文的话,min-content
的宽度将取决于内容中最长的单词宽度,中文就有点怪异(其中之因目前并未深究),而max-content
则会计算内容排整行的宽度,有点类似于加上了white-space:nowrap
一样。
上例仅展示了
min-content
和max-content
最基本的渲染效果(Chrome浏览器渲染行为)。这里不做深入的探讨论,毕竟不是本文的重点,如果感兴趣,欢迎关注后续的相关更新,或者先阅读@张鑫旭 老师写的一篇文章《
如需转载,烦请注明出处:https://www.w3cplus.com/css/flex-item-calculate.html
如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!