关于弹性布局的笔记

弹性布局 笔记

flex 布局的基本概念

Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。
复制代码

flex-direction 属性

• row
• row-reverse
• column
• column-reverse

row: 主轴为水平，内容从左往右排列
row-reverse: 主轴为水平，内容从右往左排列
colum: 主轴为垂直，内容从上往下排列
column-reverse: 主轴为垂直，内容从下往上排列
复制代码

flex-wrap 属性

flex-wrap: nowrap;			子元素不会换行，这可能导致溢出父容器
flex-wrap: wrap;			当子元素超过父元素时，会自动换行，不过当父元素高度不够时也会溢出
flex-wrap: wrap-reverse;	子元素能超过父元素时会自动换行，不过这里是向上换行
复制代码

gap 属性

• gap
• row-gap
• column-gap

/* 这些属性名为（grid-row-gap，grid-column-gap，grid-gap）最初定在CSS网格布局中。 */
gap: 每个元素的行间距与列间距
row-gap: 每个元素直接的行间距
column-gap: 每个元素直接的列间距
复制代码

控制对齐的方式

• justify-content
• align-items
• align-self
• align-content

justify-content: 控制主轴（横轴）上所有flex元素的对齐
align-item: 控制交叉轴（纵轴）上所有flex元素的对齐
align-self: 控制交叉轴（纵轴）上的单个flex元素的对齐
align-content: 控制多条主轴的flex元素的对齐
复制代码

order 属性

可以使用order 属性指定单个项目并更改其在视觉顺序中的显示位置。

在子元素中设置order可以改变视觉顺序，默认order为0
之后设置的order比0小那么就会排在前面，反之就会排在后面
复制代码

控制flex子元素在主轴上的比例

• flex-grow
• flex-shrink
• flex-basis

flex-grow: 子元素占父元素的几份，一般适于flex-basis互相影响的
flex-basis: 子元素占父元素的多大位置
flex-shrink: 在设置子元素的flex-shrink为0是，则不允许子元素的收缩，可能会导致溢出父容器，设定了改值后，子元素不会收缩
复制代码