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属性的使用方法就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。