CSS 弹性盒布局(flex) - 二

2023-08-31 204 阅读2分钟

接着第一篇文章的内容, 我们来说一下 子容器的属性

子容器属性

order (排序)

flex-grow (放大)

flex-shrink (缩小)

flex-basis (初始大小)

flex (空间处理的缩写)

align-self (对齐方式-可覆盖父级的设置)

如果父级设置了弹性布局(display: flex;), 那当前元素就可以设置以上的6个属性设置。

`order` 排列顺序

order: <integer>;

值为一个整数, 默认值为 0;

`flex-grow` 放大比例

flex-grow: <number [0,∞]>

该属性定义怎样分配剩余空间, 如果有剩余空间将会按比例分配剩余空间
默认值为 0; 如果值为 0 表示存在剩余空间，也不放大, 还是原来的大小

`flex-shrink` 缩小比例

flex-shrink: <number [0,∞]>

该属性定义怎样缩小自身大小, 如果空间不足时将会按比例缩小
默认值为 1; 如果设置为 0, 表示即使宽度不足也不进行收缩

`flex-basis` 初始大小

flex-basis = content | <'width'>

指定了 flex 元素在主轴方向上的初始大小, 默认值为 auto
当一个元素同时被设置了 flex-basis (除值为 auto 外) 和 width (或者在 flex-direction: column 情况下设置了height) , flex-basis 具有更高的优先级。
content: 可以设置 fill fill-content max-content min-content
<'width'>: 可以设置和宽度或者高度同样的值, 如 100px, 10%, 10vw

`flex` (`flex-grow`, `flex-shrink` 和 `flex-basis`的简写)

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

默认值: 0 1 auto; auto: 1 1 auto; none: 0 0 auto;
虽然他支持单值语法和双值语法, 但建议还是把 3 个都明确写出来

`align-self` 单个项目对齐方式

align-self: auto | flex-start | flex-end | center | baseline | stretch;

可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

小结

flex-grow 剩余空间放大比例, 默认值: 0;
flex-shrink 空间不足收缩比例, 默认值: 1;
flex-basis 初始大小, 默认值: auto
flex 是: flex-grow, flex-shrink 和 flex-basis的简写
order 定义排序规则
align-self 定义单个元素的对齐方式, 可参考父级 align-items 的设置

参考文档