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

高洛峰
Release: 2017-03-15 10:56:59
Original
2669 people have browsed it


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 table indicates the version of the first browser that supports the attribute Number.

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

Attributesflex-flow29.011.028.09.017.0

Definition and Usage

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

The flex-flow property is used to set or retrieve the arrangement of the child elements of the flexbox 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.

21.0 -webkit-
10.0 -ms-
18.0 -moz-
6.1 -webkit-
No##Can be animatedCSS3 animation Version: ##JavaScript Syntax: object


CSS Syntax


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

Attribute value

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 inheritInherit 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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template