CARVIEW

MOTORHOMES

Select Language

HTTP/2 301 server: GitHub.com content-type: text/html location: https://webplatform.github.io/docs/css/properties/flex-flow/ access-control-allow-origin: * expires: Wed, 15 Oct 2025 23:14:10 GMT cache-control: max-age=600 x-proxy-cache: MISS x-github-request-id: 7F8E:1AF2E3:7131:AC2D:68F02865 accept-ranges: bytes age: 0 date: Wed, 15 Oct 2025 23:04:10 GMT via: 1.1 varnish x-served-by: cache-bom-vanm7210098-BOM x-cache: MISS x-cache-hits: 0 x-timer: S1760569451.540756,VS0,VE289 vary: Accept-Encoding x-fastly-request-id: 44708b4c29c03a2c55dd118ffda5e7e1221a9182 content-length: 162 HTTP/2 200 server: GitHub.com content-type: text/html; charset=utf-8 last-modified: Thu, 09 Jan 2020 08:57:10 GMT access-control-allow-origin: * etag: W/"5e16eae6-1fd3" expires: Wed, 15 Oct 2025 23:14:10 GMT cache-control: max-age=600 content-encoding: gzip x-proxy-cache: MISS x-github-request-id: A0F4:1DF64E:6FB1:AA6E:68F02866 accept-ranges: bytes age: 0 date: Wed, 15 Oct 2025 23:04:11 GMT via: 1.1 varnish x-served-by: cache-bom-vanm7210098-BOM x-cache: MISS x-cache-hits: 0 x-timer: S1760569451.843609,VS0,VE293 vary: Accept-Encoding x-fastly-request-id: d342c238efb2442e8e028b3047c3edca5cc1be39 content-length: 2550 flex-flow · WebPlatform Docs

This page is In Progress

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

flex-flow

Summary

The flex-flow CSS property defines the flex container’s main and cross axis. It is a shorthand property for the flex-direction and flex-wrap properties.

Overview table

Initial value: See individual properties.
Applies to: flex containers
Inherited: No
Media: visual
Computed value: See individual properties.
Animatable: No
CSS Object Model Property: flexFlow

Syntax

flex-flow: <flex-direction> <flex-wrap>

Values

<flex-direction> <flex-wrap>: The shorthand value includes the values of the following properties:

Examples

Displaying children in a row wrapping to the next line.

.list {
  display: flex;
  flex-flow: row wrap;
}
.list div {
  flex: 1;
}

View live example

The Holy Grail Layout example.

flex-flow: row;

View live example

Related specifications

CSS Flexible Box Layout Module: Candidate Recommendation

flex-flow

Summary

Overview table

Syntax

Values

Examples

Related specifications

See also

Related articles

Flexbox

External resources