如何解决当flex-direction设置为“ column”时,哪个属性控制宽度?
虽然我设置了flex-direction: column
和align-items:flex-start
(或除默认值外的任何其他值,称为“ stretch”),哪个自动分配的CSS属性控制弹性项目的 width ?
我知道设置flex-basis
时flex-direction:column
控制高度(因为主轴是从上到下)。但是我真的想知道在这种情况下它控制哪个弹性项目的“宽度”吗?
解决方法
这将是CSS width
属性。
根据规范并遵循the Cross Size Determination:
确定每个弹性项目的已使用交叉尺寸。如果弹性项目具有align-self:Stretch,其计算的交叉尺寸属性为auto,并且其交叉轴边距都不是auto,则使用的外部十字尺寸是其弹性线的已使用十字尺寸,根据该项目的使用的最小和最大十字尺寸。 否则,使用的十字尺寸是商品的假定十字尺寸。
如果不使用拉伸,您显然会陷入假想的交叉尺寸
通过使用使用的主要尺寸和可用空间进行布局来确定每个项目的假设交叉尺寸,将其自动处理为适合内容。
那么我们还可以阅读:
交叉尺寸
交叉尺寸属性
柔性容器或柔性物品的宽度或高度(以横截面尺寸为准)是该盒子的横截面尺寸。因此,其交叉尺寸属性是宽度或高度属性,无论是在交叉尺寸中。
因此,您在处理列方向时只需使用 width 属性定义宽度,如果宽度为NSEntityMapping
,它将计算为auto
此处https://www.w3.org/TR/css-sizing-3/#fit-content-size
中有关fit-content
的更多详细信息
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。