10-24 06:08 阅读 97

关注

Flex（弹性盒子模型）布局

属性分类

弹性容器的相关属性

定义弹性盒子模型

CSS3中想要设置为弹性盒子模型的话，需要通过display样式属性设置值为flex或inline- flex即可。

display : flex; display : inline-flex; 复制代码

按照上述示例代码设置指定元素为弹性盒子模型，该元素成为伸缩容器，其子元素则成为伸缩项目。

• flex: 设置指定元素为块级元素的弹性盒子模型。

• inline- flex: 设置指定元素为行内块级元素的弹性盒子模型。

弹性盒子模型依旧存在浏览器兼容问题:

display : -webkit-flex; display: -ms-flex; display: -moz-flex; display: -o-flex; 复制代码

flex-direction属性

CSS flex-direction属性适用于伸缩容路元素，用于创建主轴的方向。

flex-direction: row| row-reverse| column| column-reverse 复制代码

• row:设置主轴是水平方向。

• row-reverse: 与row的排列方向相反。

• column: 设置主轴是垂直方向。

• column-reverse: 与column的排列方向相反。

DEMO row

.c1{             flex-direction:row;         } 复制代码

DEMO row-reverse

.c2{             flex-direction: row-reverse ;         } 复制代码

DEMO column

.c3{             flex-direction: column ;         } 复制代码

DEMO column-reverse

.c4{             flex-direction: column-reverse ;         } 复制代码

justify-content属性

CSS justify - content属性适用于伸缩容器元素，用于设置伸缩项目沿着主轴线的对齐方式。

justify-content: center| flex-start | flex-end| space- between | space-around 复制代码

• center: 伸缩项目向第一行的中间位置对齐。

• flex-start: 伸缩项目向第-行的开始位置对齐。

• flex-end: 伸缩项目向第一行的结束位置 对齐。

• space-between: 伸缩项目会平均分布在一 行中。

• space-evenly:伸缩项目会平均分布在一行中，两端保留一半的空间。

DEMO center

.c2{             /* center 一表示伸缩容器沿着主轴的中间位置*/             justify-content: center;         } 复制代码

DEMO flex-start

.c1{             /* flex-start -表示伸缩容器沿着主轴的起点*/             justify-content:flex-start;         } 复制代码

DEMO flex-end

.c3{             /* flex-end -表示伸缩容器沿着主轴的终点*/             justify-content: flex-end;         } 复制代码

DEMO space-between

.c4{             /* space-between 一表示伸缩项目平均分配在伸缩容器*/             justify-content: space-between;         } 复制代码

**DEMO ** space-evenly

.c5{             /* space-evenly -表示伸缩项目平均分配在伸缩容器,起点和终点位置留白*/             justify-content: space-evenly;         } 复制代码

align-items属性

cSS align-items属性适用于伸缩容器元素，用于设置伸缩项目所在行沿着侧轴线的对齐方式。

align-items: center| flex-start| flex-end| baseline| stretch 复制代码

• center: 伸缩项目向侧轴的中间位置对齐。

• flex-start: 伸缩项目向侧轴的起点位置对齐。

• flex-end: 伸缩项目向侧轴的终点位置对齐。

• baseline:伸缩项目根据伸缩项目的基线对齐。

• stretch: 默认值，伸缩项目拉伸填充整个伸缩容器。

DEMO center

.c2{             /* center 一表示伸缩容器沿着侧轴的中间位置*/             align-items: center;         } 复制代码

DEMO flex-start

.c1{             /* align-items: -表示伸缩容器沿着侧轴的起点*/             align-items: flex-start;         } 复制代码

DEMO flex-end

.c3{              /* flex-end -表示伸缩容器沿着侧轴的终点*/             align-items: flex-end;         } 复制代码

flex-wrap属性

CSS flex-wrap属性适用于伸缩容器元素，用于设置伸缩容器的子元素是单行显示还是多行显示。

flex-wrap: nowrap| wrap| wrap-reverse 复制代码

• nowrap:设置伸缩项目单行显示。这种方式可能导致溢出伸缩容器。

• wrap:设置伸缩项多行显示。

• wrap-reverse: 与wrap相反。

DEMO nowrap

.c2{             width: 500px;             flex-wrap: nowrap;         } 复制代码

DEMO wrap

.c3{             width: 500px;             flex-wrap: wrap;         } 复制代码

DEMO wrap-reverse

.c4{             width: 500px;             flex-wrap: wrap-reverse;           } 复制代码

align-content属性

CSS align-content属性适用于伸缩容器元素，用于设置伸缩行的对齐方式。该属性会更改flex-wrap属性的效果。

align-content: center | flex-start | flex-end | space-between| space-around| stretch 复制代码

• center: 各行向伸缩容器的中间位置对齐。

• flex-start: 各行向伸缩容器的起点位置对齐。

• flex- end:各行向伸缩容器的终点位置对齐。

• space-between: 各行会平均分布在一行中。

• space- around:各行会平均分布在一行中，两端保留-半的空间。

• stretch:默认值，各行将会伸展以占用额外的空间。

DEMO center

c2{             align-content: center;         } 复制代码

DEMO flex-start

.c1{             align-content: flex-start;         } 复制代码

DEMO flex- end

.c3{             align-content: flex-end;         } 复制代码

DEMO space-between

.c4{             align-content: space-between;         } 复制代码

DEMO space- around

.c5{             align-content: space-around;         } 复制代码

DEMO stretch

.c6{             align-content: stretch;         } 复制代码

作者：莫笑沉吟
链接：https://juejin.cn/post/7022516545783857166