沐鸣登录_网站前端制作之display flex布局

www.pptschool.com 沐鸣平台注册 2022-04-28 116 次浏览 没有评论

display:flex 是一种新布局方式,由W3C提出的,能够以很少的样式代码完成以前需要很多样式的布局,可以简便、完整、响应式地实现各种页面布局,兼容大部分浏览器,ie10开始支持,但是IE10的是-ms形式的。

display:flex有六个属性,分别是:1.flex-direction;2.flex-wrap;3.flex-flow;4.justify-content;5.align-item;6.align-content。

第一个:flex-direction属性:决定主轴的方向(即项目的排列方向)。有4个属性值:

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

第二个:flex-wrap属性:定义换行情况。有3个属性值:nowrap(默认):不换行;wrap:换行,第一行在上方;wrap-reverse:换行,第一行在下方。

第三个:flex-flow属性:flex-direction和flex-wrap的简写,默认row nowrap。

第四个:justify-content属性:定义项目在主轴上的对齐方式。有多个属性值,在这里介绍常用的几个属性值:flex-start(默认值):左对齐;flex-end:右对齐;center:居中;space-between:两端对齐,项目之间间隔相等;space-around:每个项目两侧的间隔相等,即项目之间的间隔比项目与边框的间隔大一倍。

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

第六个:align-content属性:定义多根轴线的对齐方式,有6个属性值:flex-start:与交叉轴的起点对齐;flex-end:与交叉轴的终点对齐;center:与交叉轴的中点对齐;space-between:与交叉轴的两端对齐,轴线之间的间隔平均分布;space-around:每根轴线两侧的间隔相等,即轴线之间的间隔比轴线与边框的间隔大一倍;stretch(默认值):轴线占满整个交叉轴。

回顶部