align-items为baseline时，项目会按照文本的基线对齐
先针对第二个项目设置了一个padding，这样第二个项目的文字就会被挤下去，所以文字就不会在同一条基线上了
如果设置align-items: baseline之后，项目明显都在同一条基线上。
在上文的flex-wrap中，换行显示的盒子出现了一些空隙，这就和align-content有关系，align-content是CSS中用于控制flex容器中多行项目的对齐方式的属性。它适用于具有多行内容的flex容器，并决定了这些行在容器中的项目在交叉轴上的对齐方式。
以下是align-content的一些常用的取值：
- flex-start：将多行项目对齐到容器的起始位置。第一行将与容器的顶部对齐。
- flex-end：将多行项目对齐到容器的结束位置。最后一行将与容器的底部对齐。
- center：将多行项目在容器中垂直居中对齐。
- space-between：在容器中平均分布多行项目，使第一行在容器的顶部，最后一行在容器的底部，剩余的行平均分布在中间。
- space-around：在容器中平均分布多行项目，使每行周围具有相等的空间，包括顶部和底部。
- space-evenly：在容器中平均分布多行项目，使每行之间和周围都具有相等的空间。
- stretch（默认值）：在容器中平均分布多行项目，项目将被拉伸以填充整个容器的高度。
需要注意的是，align-content只在有多行的情况下才会生效，而在只有一行的情况下是不会产生任何效果的，所以以下的示例全部会涉及到flex-wrap换行。
当默认不写align-content时，align-content的值默认取stretch，也就是会把每一个项目都会拉伸来撑满整个容器，这里最多2行，所以每个项目的高度都被拉伸到了容器高度/2。
当对子项目设置高度的时候，项目不会被拉伸，但是原来拉伸后的空间会有间距填充
当align-content的值取flex-start时，第一行会靠着交叉轴起点，也就是顶部对齐，不会留有上图那样的间距
当align-content的值取flex-end时，最后一行会靠着交叉轴终点，也就是底部对齐，也不会留有上图那样的间距
当align-content的值取center时，项目会在交叉轴上居中对齐，向两边平均分布，这个与之前的align-items和justify-content相似
当align-content的值取space-between时，项目会在交叉轴上贴着两端，中间间距相同
当align-content的值取space-around时，每个项目的上下间距相同，和justify-content一样，因为中间的间距叠加，首尾的间距是中间间距的一半
当align-content的值取space-evenly时，所有交叉轴上的间距相同
order属性用于控制Flex容器中子元素的排序。默认情况下，Flex容器中的子元素按照它们在HTML源代码中的顺序进行排列，但是使用order属性，我们可以改变这个顺序
每个Flex项目的order属性默认值是0。你可以为项目设定任意整数值，数值可以是正数、0或者负数。具有较小order值的元素将被优先排列，具有相同order值的元素将按照它们在HTML源代码中的原始顺序排列。
flex-grow用于设置或检索flex容器中的flex子项目的能力，以根据其在flex容器中的空间比例来伸展和占用空间。
flex-grow属性的默认值为0，表示子项目将不会伸展以填充容器。
flex可以取的值是所有非负数，数值不带单位，表示当容器有剩余空间的时候，子项目按比例去增大，占满容器。子项目扩张的算法如下：比如剩余空间为 x，三个元素的 flex-grow 分别为 a，b，c。设 sum 为 a + b + c。那么三个元素将得到剩余空间分别是 x * a / sum, x * b / sum, x * c / sum
对第三个子项目进行设置flex-grow：1，表示的意思是：有剩余空间的时候，第三个项目会扩张，占一份，因为只有一个元素设置了flex-grow，所以第三项目占满了所有剩余空间。
此时如果对第三个项目设置flex-grow：2/3/4/5....都不会使他变得更大，因为剩余空间只有那么多，其他的元素也都是flex-grow：0。
对多个项目设置flex-grow时，它们就按照比例来占满剩余空间，第二个子项目占1份（四分之一），第三个子项目占3份（四分之三）
前面有说到，flex-grow可以设置所有非负的值，当所有的子项目flex-grow的值之和小于1时，计算扩张的算法会发生改变，不再只是将所有的剩余空间的按flex-grow的比例分配，而是将剩余空间*sum（三个元素的 flex-grow 分别为 a，b，c设 sum 为 a + b + c）按flex-grow的比例分配。也可以等效地理解为按上面讲的算法x * a / sum, x * b / sum, x * c / sum，当sum<1时，分母直接使用1。
如下图，第二个子项目获得剩余空间的20%，第三个子项目获得剩余空间的60%，剩下的20%仍然空出。
简单案例：之前在开发中遇到一个需求，后端会给前端传许多一段一段的标签，每个标签的宽度都不一样长，这些标签要换行排列。每一行的标签要贴着左右边缘，中间间距相等（justify-content: space-between）。最后一行标签一般都会数量较少，如果仅仅使用justify-content: space-between而不对最后一行专门处理，最后一行的间距就会特别大，影响最后页面效果的呈现。
为了解决最后一行标签数量较少的问题，可以在容器末尾加一个看不见的盒子，让那个盒子占满剩余的空间，也就是利用flex-grow: 1
以下用简单的代码模拟了一下上述开发场景
flex-shrink用于指定项目在容器中缩小的能力，当 flex 容器空间不足时候，单个元素的收缩比例。当父元素的宽度小于子元素宽度之和并且超出了父元素的宽度时，flex-shrink 就会按照一定的比例进行收缩：将子元素宽度之和与父元素宽度的差值按照子元素 flex-shrink 的值分配给各个子元素，每个子元素原本宽度减去按比例分配的值，其剩余值为实际宽度。
flex-shrink的默认值是1，也就是说，当子元素宽度的和超出父容器的时候，所有子项目都等比例的缩小
下图中所有子项目的flex-shrink都取1，但是子项目的宽度是有不同的，第二个子项目宽度为120px，第三个子项目宽度为150px，其他所有子项目的宽度都是100px，他们宽度的和是100*4+120+150 = 670px，但是父容器宽度只有400px，也就是说超出了270px。此时要等比例缩小，要计算每个盒子要缩小的宽度，算法是：子项目宽度/（每个子项目的宽度*对应shrink的值）之和 * 超出的宽度。对于宽度为100的子项目要缩小的宽度是 （100*1）/（100*4*1+120*1+150*1）*270 = 40.29px，对于第二个宽度为120px的子项目要缩小的宽度是（120*1）/（100*4*1+120*1+150*1）*270 = 48.36px，对于第三个宽度为150px的子项目要缩小的宽度是（150*1）/（100*4*1+120*1+150*1）*270 = 60.48px
所有盒子在收缩后，最后的宽度=原来宽度-要缩小的宽度
当flex-shrink为0的时候，该子项目不会收缩
以第三个150px的盒子举例，让它的flex-shrink为0，它就不会收缩，其他盒子按比例收缩，宽度为100px的项目flex-shrink为1，要缩小的宽度为 （100*1）/（100*4*1+120*1.5+150*0）*270 = 46.55px， 宽度为120px的项目flex-shrink为1.5，要缩小的宽度为 （120*1.5）/（100*4*1+120*1.5+150*0）*270 = 83.79px
flex-basis用于设置flex容器中项目的初始大小。它定义了一个项目在主轴上的初始尺寸，即在项目没有被放大或缩小之前的大小。flex-basis可以接受多种单位值，如像素（px）、百分比（%）、视口宽度（vw）、视口高度（vh）等。
flex-basis常用的值有
- <length>：可以是像素值（px）、百分比（%）等，表示项目的初始尺寸。
- auto（默认值）：项目的初始尺寸由其内容决定。如果项目没有设置尺寸或具有固定的尺寸，则自动计算尺寸。
- content：项目的初始尺寸由项目内容决定。
在Flex布局中，子项设置width是没有直接效果的，之前所有设置宽度并且生效是因为没有写flex-basis属性，也就是说flex-basis属性取了默认值auto，当flex-basis取auto的时候，容器的宽度就由子项自身的尺寸（比如width，max-width等）去渲染。
在同时用长度设置flex-basis和width时，width将无效，根据flex-basis的值决定尺寸
在设置flex-basis为content时，子项目的尺寸根据内容的大小决定
flex属性是flex-grow，flex-shrink，flex-basis三个属性的简写，用于控制子项目的缩放行为和初始尺寸。
flex的完整写法是 flex：<flex-grow> <flex-shrink> <flex-basis>，也就是一共有3个值要去设置，分别按顺序对应flex-grow，flex-shrink，flex-basis，而在日常工作中并不会经常写完整的写法，而较常用的是flex：1或者50%这种写法。
flex-grow和flex-shrink可以同时设置，但是对于一个元素，同时只会有其中一者生效，因为flex-grow需要有剩余空间才能进行拉伸分配而flex-shrink需要子元素宽度之和超过父元素（溢出）才会收缩，一个盒子要么空间不足，要么就空间超出，不可能既有剩余空间又宽度之和超出父元素
flex属性的常用值有
- flex: auto: 此值表示元素可以根据可用空间进行伸缩，可以扩展也可以收缩。
- flex: initial: 此值将 flex-grow、flex-shrink 和 flex-basis 设置为默认值。flex-grow 为 0，flex-shrink 为 1，flex-basis 为 auto。
- flex: none: 此值表示元素不应该伸缩。flex-grow 和 flex-shrink 均为 0，flex-basis 为其本来的大小。
- flex: 数字/百分比/长度
flex:auto代表的是 flex:1 1 auto（flex-grow:1, flex-shrink: 1, flex-basis: auto) ，表示的是根据具体空间来进行扩展或者收缩
flex:initial（默认值）代表的是 flex:0 1 auto（flex-grow:0, flex-shrink: 1, flex-basis: auto) ，表示子项目不会在有剩余空间时候扩张，但是超出时会要收缩。
flex:none 代表的是 flex:0 0 auto（flex-grow:0, flex-shrink: 0, flex-basis: auto)，表示子项目不会扩张也不会收缩，保持原有尺寸
在超出父容器的时候，也会继续保持原有的尺寸
其他值：
如果只写一个值，类似于flex: 1 这种，分2种情况
- 如果写的是数字比如，flex: 1，flex: 2，flex: 3这种那设置的是flex-grow的值，其他2个值取默认
- 如果写的是百分比（flex: 20%）或者是长度（flex: 100px），就是设置的flex-basis属性，其他2个值取默认
如果只写两个值，第一个值对应的是flex-grow，第二个值对应2种情况
- 如果第二个值写的是数字比如，flex: 1，flex: 2，flex: 3这种那设置的是flex-shrink的值
- 如果写的是百分比（flex: 20%）或者是长度（flex: 100px），就是设置的flex-basis属性
如果写三个值，对应地去设置flex-grow、flex-shrink 和 flex-basis
简单案例：
场景1：简单实现一个两栏布局，左列定宽，右边自适应
这里用到flex: 1 让右边的项目自动根据剩余空间扩张
场景2：让多个盒子分行排列，每行要三个盒子，同时宽度自适应
这里要对父容器设置flex-wrap：wrap，对子项目设置，flex：33%来让它们每行排列3个
align-self属性用于调整Flex容器中单个项目（Flex项）的垂直对齐方式。它允许你为单个项目指定不同于其它项目的垂直对齐方式。align-self属性可以应用于任何Flex项，并覆盖容器级别的垂直对齐设置（通过align-items属性设置）
常用的值有：
- auto（默认值）：继承自父容器的align-items属性。
- flex-start：项目与容器的顶部对齐。
- flex-end：项目与容器的底部对齐。
- center：项目在容器的垂直中心对齐。
- baseline：项目与容器的基线对齐。
- stretch：项目被拉伸以填充整个容器的高度。
这些取值都在前面的align-items中介绍过了，这里只用一些案例来演示align-self的效果
针对第二个子项目，设置了align-self: center，第三个子项目设置了align-self: flex-end
这里是单行的align-self效果
如果在父容器中加入换行，效果如下
版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/rfx/27329.html