深入解析CSS （3）Flexbox

最新推荐文章于 2024-10-08 10:54:18 发布

woowen！

最新推荐文章于 2024-10-08 10:54:18 发布

阅读量460

点赞数

分类专栏： css 文章标签： css 前端

本文链接：https://blog.csdn.net/q1ngqingsky/article/details/128371881

版权

css 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

Flexbox，全称弹性盒子布局

给元素添加display: flex，该元素变成了一个弹性容器（flex container），它的直接子元素变成了弹性子元素（flex item）。

弹性子元素默认是在同一行按照从左到右的顺序并排排列。

弹性容器像块元素一样填满可用宽度，但是弹性子元素不一定填满其弹性容器的宽度。

弹性子元素高度相等，该高度由它们的内容决定。

Flexbox允许使用margin: auto来填充弹性子元素之间的可用空间。

flex属性控制弹性子元素在主轴方向上的大小（在这里指的元素的宽度）

flex属性是三个不同大小属性的简写：flex-grow、flex-shrink和flex-basis

1.使用flex-basis属性【弹性子元素属性】

flex-basis定义了元素大小的基准值，即一个初始的“主尺寸”.

flex-basis可设置为任意的width值

2.使用flex-grow属性【弹性子元素属性】

flex-grow（增长因子）的值分配给每个弹性子元素，flex-grow的值为非负整数。如果一个弹性子元素的flex-grow值为0，那么它的宽度不会超过flex-basis的值；如果某个弹性子元素的增长因子非0，那么这些元素会增长到所有的剩余空间被分配完，也就意味着弹性子元素会填满容器的宽度

flex-grow的值越大，元素的“权重”越高，也就会占据更大的剩余宽度。一个flex-grow:2的子元素增长的宽度为flex-grow: 1的子元素的两倍

3.使用flex-shrink属性【弹性子元素属性】

每个子元素的flex-shrink值代表了它是否应该收缩以防止溢出。

如果某个子元素为flex-shrink: 0，则不会收缩；

如果值大于0，则会收缩至不再溢出。

按照flex-shrink值的比例，值越大的元素收缩得越多。

圣杯布局：

4.align-self属性【弹性子元素属性】

该属性控制弹性子元素沿着容器副轴方向的对齐方式

它跟弹性容器的align-items属性效果相同，但是它能单独给弹性子元素设定不同的对齐方式。auto为初始值，会以容器的align-items值为准。其他值会覆盖容器的设置。align-self属性支持的关键字与align-items一样：flex-start、flex-end、center、stretch以及baseline。