400-800-9385
网站建设资讯详细

网站前端制作之display flex布局

发表日期:2022-04-26 15:48:05   作者来源:林志平   浏览:429   标签:网站前端制作    
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(默认值):轴线占满整个交叉轴。
如没特殊注明,文章均为方维网络原创,转载请注明来自https://www.szfangwei.cn/news/6409.html