flex布局常用属性

实现flex布局

mian{
  display: flex;
  //行内元素 display: inline-flex;
}

控制主轴方向

flex-direction
---row(默认值):主轴为水平方向,起点在左端。
---row-reverse:主轴为水平方向,起点在右端。
---column:主轴为垂直方向,起点在上沿。
---column-reverse:主轴为垂直方向,起点在下沿。

控制换行

flex-wrap
---nowrap(默认):不换行
---wrap:换行,第一行在上方
---wrap-reverse:换行,第一行在下方

在主轴上的对齐方式

justify-content
---flex-start(默认值):左对齐
---flex-end:右对齐
---center: 居中
---space-between:两端对齐,元素之间的间隔都相等。
---space-around:每个原色两侧的间隔相等。

在交叉轴上的对齐方式

align-items
---flex-start:交叉轴的起点对齐。
---flex-end:交叉轴的终点对齐。
---center:交叉轴的中点对齐。
---baseline: 项目的第一行文字的基线对齐。
---stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

元素的放大比例

默认为0即不放大
flex-grow

元素的缩小比例

默认为1
flex-shrink

设置单个元素有与其他元素不一样的对齐方式

align-self
---flex-start:交叉轴的起点对齐。
---flex-end:交叉轴的终点对齐。
---center:交叉轴的中点对齐。
---baseline: 项目的第一行文字的基线对齐。
---stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注