What is CSS flex-wrap property?

CSS Reference Manual
CSS Attributes

The best CSS flex-wrap property Tutorial In 2024, In this tutorial you can learn Examples,Browser Support,Definition and Usage,CSS Syntax,Property Value,related articles,

CSS flex-wrap property

Previous: CSS flex-shrink properties

Next: CSS Animation

CSS Reference

Examples

Let the elastic element cartridge when necessary, split line:

display:flex;
flex-wrap: wrap;

Browser Support

Figures in the table represent the first browser to support the property version number.

Immediately following the digital -webkit-, -ms- or -moz- after the first version to support the prefix property.

Attributes
flex-wrap	29.0 21.0 -webkit-	11.0 10.0 -ms-	28.0 18.0 -moz-	9.0 6.1 -webkit-	17.0

Definition and Usage

flex-wrap attribute specifies flex container is a single-line or multi-line, while the horizontal axis determines the direction of the new line stacking direction. .

Note: If theelement is not resilient element box object, the flex-wrap property does not work.

Defaults:	nowrap
inherit:	no
Can be animated:	no. Please refer to animation (Animatable) .
version:	CSS3
JavaScript syntax:	object .style.flexWrap = "nowrap"try

CSS Syntax

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

Property Value

值	描述
nowrap	默认值。规定灵活的项目不拆行或不拆列。
wrap	规定灵活的项目在必要的时候拆行或拆列。
wrap-reverse	规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。
initial	设置该属性为它的默认值。请参阅 initial 。
inherit	从父元素继承该属性。请参阅 inherit 。