-
Notifications
You must be signed in to change notification settings - Fork 22.4k
/
index.md
82 lines (56 loc) · 1.76 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
---
title: flex-flow
slug: Web/CSS/flex-flow
page-type: css-shorthand-property
browser-compat: css.properties.flex-flow
---
{{CSSRef}}
The **`flex-flow`** [CSS](/en-US/docs/Web/CSS) [shorthand property](/en-US/docs/Web/CSS/Shorthand_properties) specifies the direction of a flex container, as well as its wrapping behavior.
{{EmbedInteractiveExample("pages/css/flex-flow.html")}}
## Constituent properties
This property is a shorthand for the following CSS properties:
- [`flex-direction`](/en-US/docs/Web/CSS/flex-direction)
- [`flex-wrap`](/en-US/docs/Web/CSS/flex-wrap)
## Syntax
```css
/* flex-flow: <'flex-direction'> */
flex-flow: row;
flex-flow: row-reverse;
flex-flow: column;
flex-flow: column-reverse;
/* flex-flow: <'flex-wrap'> */
flex-flow: nowrap;
flex-flow: wrap;
flex-flow: wrap-reverse;
/* flex-flow: <'flex-direction'> and <'flex-wrap'> */
flex-flow: row nowrap;
flex-flow: column wrap;
flex-flow: column-reverse wrap-reverse;
/* Global values */
flex-flow: inherit;
flex-flow: initial;
flex-flow: revert;
flex-flow: revert-layer;
flex-flow: unset;
```
### Values
See {{cssxref("flex-direction")}} and {{cssxref("flex-wrap")}} for details on the values.
## Formal definition
{{cssinfo}}
## Formal syntax
{{csssyntax}}
## Examples
### Setting column-reverse and wrap
```css
element {
/* Main-axis is the block direction with reversed main-start and main-end. Flex items are laid out in multiple lines */
flex-flow: column-reverse wrap;
}
```
## Specifications
{{Specifications}}
## Browser compatibility
{{Compat}}
## See also
- CSS Flexbox Guide: _[Basic Concepts of Flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)_
- CSS Flexbox Guide: _[Ordering flex items](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Ordering_flex_items)_