CSS3 弹性布局

Posted 2023-03-13

参考技术A flex 是 flexible box 的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性。能够高效方便的控制元素的对齐、排列，自动计算布局内元素的尺寸，无论元素的尺寸是固定的还是动态的，控制元素在页面的布局方向。

弹性盒子由弹性容器(flex container)和弹性子元素(flex item)组成。

弹性容器设置属性 display:flex;

一、容器属性

flex-flow 复合属性，是 flex-direction 和 flex-wrap 的简写形式。 默认值：flex-flow: row nowrap;

⑴ flex-direction 子元素排列方向

flex-direction: row; 从左到右

flex-direction: row-reverse; 从右到左

flex-direction: column; 从上到下

flex-direction: column-reverse; 从下到上

⑵ flex-wrap 子元素换行方式

flex-wrap: nowrap; 不换行

flex-wrap:wrap; 换行

flex-wrap: wrap-reverse; 反转 wrap 排列，行颠倒

2 justify-content 子元素沿主轴对齐方式

justify-content: flex-start;

justify-content: space-between;

3 align-items 子元素在交叉轴上对齐方式

align-items: center; 垂直方向居中

align-items:flex-start; 垂直方向的顶部/交叉轴的起点对齐

align-items: flex-end; 垂直方向的底部/交叉轴的终点对齐

align-items: baseline; 项目的第一行的文字的基线对齐

align-items: stretch; 默认值，如果项目未设置高度或设为auto，将占满整个容器的高度

二、子元素属性（写在子元素下）

align-self 用于设置弹性子元素自身在侧轴（纵轴）方向上的对齐方式。允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。

align-items: center;

align-items: flex-start;

align-items: flex-end;

align-items: baseline;

align-items: stretch;

order 定义子元素的排列顺序。数值越小，排列越靠前，默认为order: 0;，可以为负值。

flex-grow 定义子元素的扩展比率，主要作用：分配剩余空间。负值无效。

flex-grow: 0; 默认值，即如果存在剩余空间，也不放大。

flex-grow: 1; 如果存在剩余空间，放大 ，等分剩余空间。

flex-shrink 定义子元素的收缩比率，值越大，按比例缩的就越小。

flex-shrink: 1; 默认值，即如果空间不足，缩小。

flex-shrink: 0; 不缩小。

flex-basis 定义元素的默认基准值。

设置了flex-basis，width就不起作用；同时存在的时候，优先使用flex-basis。

如果容器的宽度太小，子元素排列不下，设置的flex-basis的宽度会自动缩小，直到占满容器。

链接：https://juejin.cn/post/7038088241437736991