网站前端制作之displayflex布局

2023-03-26    分类: 网站建设

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,将占满整个容器的高度。

新闻名称:网站前端制作之displayflex布局
网站路径:https://www.cdcxhl.com/news19/247869.html

成都网站建设公司_创新互联,为您提供网站设计公司移动网站建设做网站自适应网站网页设计公司手机网站建设

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

小程序开发