css中flex-wrap属性的使用方法

这篇文章将为大家详细讲解有关css中flex-wrap属性的使用方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

成都创新互联公司专注为客户提供全方位的互联网综合服务,包含不限于网站建设、成都网站设计、原平网络推广、微信小程序开发、原平网络营销、原平企业策划、原平品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等,从售前售中售后,我们都将竭诚为您服务,您的肯定,是我们最大的嘉奖;成都创新互联公司为所有大学生创业者提供原平建站搭建服务,24小时服务热线:18982081108,官方网址:www.cdcxhl.com

css flex-wrap属性用于规定flex容器是单行或者多行,同时横轴的方向决定了新行堆叠的方向,CSS语法是flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;如果元素不是弹性盒对象的元素,则flex-wrap属性不起作用。

css flex-wrap属性怎么用?

定义和用法

flex-wrap 属性规定flex容器是单行或者多行,同时横轴的方向决定了新行堆叠的方向。。

注意:如果元素不是弹性盒对象的元素,则 flex-wrap 属性不起作用。

默认值: nowrap

继承: 否

可动画化: 否。

版本: CSS3

JavaScript 语法:

 object.style.flexWrap="nowrap"

CSS 语法:

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

属性值

nowrap 默认值。规定灵活的项目不拆行或不拆列。

wrap 规定灵活的项目在必要的时候拆行或拆列。

wrap-reverse 规定灵活的项目在必要的时候拆行或拆列,但是以相反的顺序。

initial 设置该属性为它的默认值。

inherit 从父元素继承该属性。

实例

让弹性盒元素在必要的时候拆行:










A
B
C
D
E
F

注意: Internet Explorer 10 及更早版本浏览器不支持 flex-wrap 属性。

注意: Safari 6.1 及更新版本通过 -webkit-flex-wrap 属性支持该属性。

效果:

css中flex-wrap属性的使用方法

关于css中flex-wrap属性的使用方法就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。


文章标题:css中flex-wrap属性的使用方法
网站路径:http://scyanting.com/article/gspeec.html