Detailed explanation of the CSS flex-flow property of the Flexible flexible box model

Example

Let the elements of the flexbox be displayed in reverse order and split when necessary ：

1. display:flex;

2. flex-flow:row-reverse wrap;

##Effect preview

---

Browser support

The number in the tableindicates the version of the first browser that supports theattributeNumber.

The number immediately following -webkit-, -ms- or -moz- is the first version that supports this prefix attribute.

---

Definition and Usage

The flex-flow property is a composite property of the flex-directionand flex-wrap properties.

The flex-flow property is used to set or retrieve the arrangement of the child elements of theflexbox modelobject.

The flex-direction property specifies the direction of a flexible item.

The flex-wrap attribute specifies whether the flexible item should be split into rows or columns.

Note:If the element is not an element of the flexbox object, the flex-flow property has no effect.

Attributes flex-flow 29.0 11.0 28.0 9.0 17.0

	21.0 -webkit-	10.0 -ms-	18.0 -moz-	6.1 -webkit-

---

CSS Syntax

flex-flow:flex-directionflex-wrap|initial|inherit;

Attribute value

No ##Can be animated CSS3 animation Version: ##JavaScript Syntax: object

Default value:	row nowrap
##Inherited:
:No. See SS3 animation properties,	examples.
CSS3
	.style.flexFlow="column nowrap" Effect preview

Possible values: Possible values: initial Set this property to its default value. See inherit Inherit this attribute from the parent element. See

Value	Description
##flex-direction	row row-reverse column column-reverse initial inherit The default value is "row". Specifies the direction of flexible projects.
flex-wrap	nowrap wrap wrap- reverse initial inherit The default value is "nowrap". Specifies whether flexible items should be split into rows or columns.
	initial.
	inherit.

The above is the detailed content of Detailed explanation of the CSS flex-flow property of the Flexible flexible box model. For more information, please follow other related articles on the PHP Chinese website!