阅读 245

关于弹性布局的笔记

弹性布局 笔记

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可以改变视觉顺序,默认order0
之后设置的order0小那么就会排在前面,反之就会排在后面
复制代码

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

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