Tillitsdone
down Scroll to discover

Mastering CSS Flex-Flow for Responsive Layouts

Discover the power of CSS flex-flow for creating responsive layouts.

This property combines flex-direction and flex-wrap, offering options like row, column, wrap, and more.
thumbnail

Introduction

The flex-flow property in CSS is a shorthand that combines flex-direction and flex-wrap. It helps control the direction and wrapping of flex items within a flex container. This property has been widely supported across browsers since September 2015.

Using flex-flow, you can manage the layout of your flex items more easily, whether you want them in rows, columns, or to wrap when they run out of space. Let’s dive into the specifics to help you use it effectively in your projects.

Specification

The flex-flow property is defined in the CSS Flexible Box Layout Module Level 1 specification. This specification ensures consistency across different browsers and platforms.

The specification for flex-flow can be found here:

Description

The flex-flow property in CSS is a shorthand that sets both flex-direction and flex-wrap in one go. This makes it easier to control the layout and wrapping behavior of flex items within a flex container.

By combining these properties, flex-flow allows you to:

  • Set the direction of the flex items (row, row-reverse, column, column-reverse).
  • Define the wrapping behavior of the flex items (nowrap, wrap, wrap-reverse).

Using flex-flow simplifies your CSS and makes your code more maintainable.

Constituent Properties

The flex-flow property combines two essential CSS properties for managing flex containers: flex-direction and flex-wrap.

flex-direction

  • row: Places the flex items in a row, following the text direction.
  • row-reverse: Places the flex items in a row, but in the opposite direction of the text.
  • column: Stacks the flex items vertically, from top to bottom.
  • column-reverse: Stacks the flex items vertically, but from bottom to top.

flex-wrap

  • nowrap: Prevents the flex items from wrapping onto multiple lines, keeping them on a single line.
  • wrap: Allows the flex items to wrap onto multiple lines if necessary.
  • wrap-reverse: Allows the flex items to wrap onto multiple lines, but in the reverse order.

Syntax

The syntax for flex-flow is straightforward:

flex-flow: flex-direction flex-wrap;

Example Syntax

/* Setting flex-direction only */
flex-flow: row;
flex-flow: row-reverse;
flex-flow: column;
flex-flow: column-reverse;


/* Setting flex-wrap only */
flex-flow: nowrap;
flex-flow: wrap;
flex-flow: wrap-reverse;


/* Setting both 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

The flex-flow property accepts values from flex-direction and flex-wrap.

flex-direction Values

  • row: Arranges the flex items in a row, following the text direction.
  • row-reverse: Arranges the flex items in a row, but in the opposite direction of the text.
  • column: Stacks the flex items vertically, from top to bottom.
  • column-reverse: Stacks the flex items vertically, but from bottom to top.

flex-wrap Values

  • nowrap: Prevents the flex items from wrapping onto multiple lines.
  • wrap: Allows the flex items to wrap onto multiple lines if necessary.
  • wrap-reverse: Allows the flex items to wrap onto multiple lines, but in the reverse order.

Example

Here is an example that demonstrates the use of the flex-flow property:

element {
  flex-flow: column-reverse wrap;
}

In this example:

  • column-reverse: The flex items are arranged from bottom to top.
  • wrap: The flex items are allowed to wrap, creating new lines if needed.

Browser Compatibility

The flex-flow property is widely supported across browsers, ensuring compatibility across various devices and browser versions.

Examples

Example 1: Row Direction with No Wrap

In this example, items are arranged in a row and do not wrap onto multiple lines.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex-flow Example</title>
    <style>
        #main {
            width: 400px;
            height: 300px;
            border: 2px solid black;
            display: flex;
            flex-flow: row nowrap;
        }


        #main div {
            width: 100px;
            height: 50px;
        }


        h1, h3 {
            margin-left: 50px;
        }
    </style>
</head>
<body>
    <h1>Website</h1>
    <h3>The flex-flow: row nowrap</h3>
    <div id="main">
        <div style="background-color:#009900;">1</div>
        <div style="background-color:#00cc99;">2</div>
        <div style="background-color:#0066ff;">3</div>
        <div style="background-color:#66ffff;">4</div>
        <div style="background-color:#660066;">5</div>
        <div style="background-color:#663300;">6</div>
    </div>
</body>
</html>

Example 2: Column Direction with Wrap

In this example, items are arranged in a column and can wrap onto multiple lines if needed.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex-flow Example</title>
    <style>
        #main {
            width: 400px;
            height: 300px;
            border: 2px solid black;
            display: flex;
            flex-flow: column wrap;
        }


        #main div {
            width: 100px;
            height: 50px;
        }


        h1, h3 {
            margin-left: 50px;
        }
    </style>
</head>
<body>
    <h1>Website</h1>
    <h3>The flex-flow: column wrap</h3>
    <div id="main">
        <div style="background-color:#009900;">1</div>
        <div style="background-color:#00cc99;">2</div>
        <div style="background-color:#0066ff;">3</div>
        <div style="background-color:#66ffff;">4</div>
        <div style="background-color:#660066;">5</div>
        <div style="background-color:#663300;">6</div>
    </div>
</body>
</html>

Example 3: Row-Reverse Direction with Wrap-Reverse

In this example, items are arranged in a row in reverse direction and can wrap onto multiple lines in reverse order.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex-flow Example</title>
    <style>
        #main {
            width: 400px;
            height: 300px;
            border: 2px solid black;
            display: flex;
            flex-flow: row-reverse wrap-reverse;
        }


        #main div {
            width: 100px;
            height: 50px;
        }


        h1, h3 {
            margin-left: 50px;
        }
    </style>
</head>
<body>
    <h1>Website</h1>
    <h3>The flex-flow: row-reverse wrap-reverse</h3>
    <div id="main">
        <div style="background-color:#009900;">1</div>
        <div style="background-color:#00cc99;">2</div>
        <div style="background-color:#0066ff;">3</div>
        <div style="background-color:#66ffff;">4</div>
        <div style="background-color:#660066;">5</div>
        <div style="background-color:#663300;">6</div>
    </div>
</body>
</html>

Example 4: Column-Reverse Direction with No Wrap

In this example, items are arranged in a column in reverse direction and do not wrap onto multiple lines.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex-flow Example</title>
    <style>
        #main {
            width: 400px;
            height: 300px;
            border: 2px solid black;
            display: flex;
            flex-flow: column-reverse nowrap;
        }


        #main div {
            width: 100px;
            height: 50px;
        }


        h1, h3 {
            margin-left: 50px;
        }
    </style>
</head>
<body>
    <h1>Website</h1>
    <h3>The flex-flow: column-reverse nowrap</h3>
    <div id="main">
        <div style="background-color:#009900;">1</div>
        <div style="background-color:#00cc99;">2</div>
        <div style="background-color:#0066ff;">3</div>
        <div style="background-color:#66ffff;">4</div>
        <div style="background-color:#660066;">5</div>
        <div style="background-color:#663300;">6</div>
    </div>
</body>
</html>

Example 5: Row Direction with Wrap-Reverse

In this example, the flex items are arranged in a row, and they wrap onto multiple lines in the reverse order if necessary.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex-flow Example</title>
    <style>
        #main {
            width: 400px;
            height: 300px;
            border: 2px solid black;
            display: flex;
            flex-flow: row wrap-reverse;
        }


        #main div {
            width: 100px;
            height: 50px;
        }


        h1 {
            color: #009900;
            font-size: 42px;
            margin-left: 50px;
        }


        h3 {
            margin-top: -20px;
            margin-left: 50px;
        }
    </style>
</head>
<body>
    <h1>Website</h1>
    <h3>The flex-flow: row wrap-reverse</h3>
    <div id="main">
        <div style="background-color:#009900;">1</div>
        <div style="background-color:#00cc99;">2</div>
        <div style="background-color:#0066ff;">3</div>
        <div style="background-color:#66ffff;">4</div>
        <div style="background-color:#660066;">5</div>
        <div style="background-color:#663300;">6</div>
    </div>
</body>
</html>

Example 6: Column Direction with No Wrap

In this example, the flex items are arranged in a column and do not wrap onto multiple lines.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex-flow Example</title>
    <style>
        #main {
            width: 400px;
            height: 300px;
            border: 2px solid black;
            display: flex;
            flex-flow: column nowrap;
        }


        #main div {
            width: 100px;
            height: 50px;
        }


        h1 {
            color: #009900;
            font-size: 42px;
            margin-left: 50px;
        }


        h3 {
            margin-top: -20px;
            margin-left: 50px;
        }
    </style>
</head>
<body>
    <h1>Website</h1>
    <h3>The flex-flow: column nowrap</h3>
    <div id="main">
        <div style="background-color:#009900;">1</div>
        <div style="background-color:#00cc99;">2</div>
        <div style="background-color:#0066ff;">3</div>
        <div style="background-color:#66ffff;">4</div>
        <div style="background-color:#660066;">5</div>
        <div style="background-color:#663300;">6</div>
    </div>
</body>
</html>

Example 7: Row-Reverse Direction with Wrap

In this example, the flex items are arranged in a row in the reverse direction and wrap onto multiple lines if necessary.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex-flow Example</title>
    <style>
        #main {
            width: 400px;
            height: 300px;
            border: 2px solid black;
            display: flex;
            flex-flow: row-reverse wrap;
        }


        #main div {
            width: 100px;
            height: 50px;
        }


        h1 {
            color: #009900;
            font-size: 42px;
            margin-left: 50px;
        }


        h3 {
            margin-top: -20px;
            margin-left: 50px;
        }
    </style>
</head>
<body>
    <h1>Website</h1>
    <h3>The flex-flow: row-reverse wrap</h3>
    <div id="main">
        <div style="background-color:#009900;">1</div>
        <div style="background-color:#00cc99;">2</div>
        <div style="background-color:#0066ff;">3</div>
        <div style="background-color:#66ffff;">4</div>
        <div style="background-color:#660066;">5</div>
        <div style="background-color:#663300;">6</div>
    </div>
</body>
</html>

Example 8: Column-Reverse Direction with Wrap

In this example, the flex items are arranged in a column in the reverse direction and wrap onto multiple lines if necessary.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex-flow Example</title>
    <style>
        #main {
            width: 400px;
            height: 300px;
            border: 2px solid black;
            display: flex;
            flex-flow: column-reverse wrap;
        }


        #main div {
            width: 100px;
            height: 50px;
        }


        h1 {
            color: #009900;
            font-size: 42px;
            margin-left: 50px;
        }


        h3 {
            margin-top: -20px;
            margin-left: 50px;
        }
    </style>
</head>
<body>
    <h1>Website</h1>
    <h3>The flex-flow: column-reverse wrap</h3>
    <div id="main">
        <div style="background-color:#009900;">1</div>
        <div style="background-color:#00cc99;">2</div>
        <div style="background-color:#0066ff;">3</div>
        <div style="background-color:#66ffff;">4</div>
        <div style="background-color:#660066;">5</div>
        <div style="background-color:#663300;">6</div>
    </div>
</body>
</html>

Browser Compatibility

The flex-flow property is widely supported across modern web browsers:

  • Google Chrome: Since version 29.0 (August 2013)
  • Mozilla Firefox: Since version 28.0 (March 2014)
  • Internet Explorer: Since version 11.0 (October 2013)
  • Safari: Since version 9.0 (September 2015)
  • Opera: Since version 17.0 (August 2013)

For mobile browsers:

  • Android Browser: Since version 4.4 (October 2013)
  • iOS Safari: Since version 9.0 (September 2015)
  • Opera Mobile: Since version 12.0 (April 2013)
  • Chrome for Android: Since version 29.0 (August 2013)
  • Firefox for Android: Since version 28.0 (March 2014)

For the most accurate and up-to-date information on browser compatibility, you can refer to the MDN Web Docs Browser Compatibility Data.

Frequently Asked Questions

What is the flex-flow property?

The flex-flow property combines flex-direction and flex-wrap into one declaration, making it easier to manage flex container layouts.

How do I use flex-flow to set a row direction with wrapping?

flex-flow: row wrap;

This arranges items in a row and allows them to wrap onto new lines if needed.

What values can flex-flow accept?

flex-flow accepts values from flex-direction (row, row-reverse, column, column-reverse) and flex-wrap (nowrap, wrap, wrap-reverse).

What is the default value of flex-flow?

The default value is row nowrap.

Can I set only one value with flex-flow?

Yes, if you set only one value, the other property takes its default value. For example:

flex-flow: column;

This sets flex-direction to column and keeps flex-wrap as nowrap.

How does flex-flow affect the layout of flex items?

flex-flow controls the direction and wrapping behavior of flex items. The flex-direction part specifies row or column layout, and the flex-wrap part determines if items wrap onto multiple lines.

Is flex-flow widely supported across browsers?

Yes, flex-flow is widely supported in modern browsers.

How can I use flex-flow to create a responsive layout?

Combine different flex-direction and flex-wrap values to create layouts that adapt to different screen sizes.

What is the difference between flex-flow and using flex-direction and flex-wrap separately?

Using flex-flow is more concise and combines both properties into one declaration, reducing the amount of code.

Can flex-flow be used with other flexbox properties?

Yes, flex-flow can be used with properties like justify-content, align-items, and flex-grow to create complex layouts.

By leveraging the flex-flow property, you can create flexible and dynamic layouts that work seamlessly across various devices and browsers.

icons/css-4.svg CSS Blogs
CSS3 is the latest version of Cascading Style Sheets, offering advanced styling features like animations, transitions, shadows, gradients, and responsive design.
CSS property CSS animation
css_property_cover/css-property-align-self.png CSS align-self Master Flexbox & Grid Alignment Learn how to use the CSS align-self property to control the alignment of individual flex and grid items. Explore available options like auto, center, flex-start, and more. css_property_cover/css-property-min-height.png Understanding CSS Min-Height Essential Guide Discover the power of CSS min-height for maintaining consistent layouts. Learn about its use cases and available options, including length, percentage, and keyword values. css_property_cover/css-property-clear.png CSS Clear Managing Floating Elements in Web Design Learn how to use the CSS clear property to manage floating elements in web design. Discover available options like left, right, both, inline-start, and inline-end. css_property_cover/css-property-inline-size.png CSS Inline-Size A Versatile Property for Responsive Design CSS inline-size is a versatile property for defining element size along the inline axis. Adjust based on writing mode, with options like pixels, percentages, and keywords. Enhance your web design with this flexible tool. css_property_cover/css-property-place-self.png CSS Place-Self Simplified Guide for Alignment The CSS place-self property is a powerful tool for aligning individual items in grid and flexbox layouts. It combines align-self and justify-self properties, offering options like auto, normal, stretch, start, end, center, and more. css_property_cover/css-property-width.png CSS Width A Comprehensive Guide for Web Design Discover the CSS width property, its use cases, and available options. Learn how to set element widths using pixels, ems, and percentages. Create responsive designs.
View all 337 CSS blogs
icons/logo-tid.svg

Talk with CEO

Ready to bring your web/app to life or boost your team with expert Thai developers?
Contact us today to discuss your needs, and let’s create tailored solutions to achieve your goals. We’re here to help at every step!
🖐️ Contact us
down Explore our best articles, cover a wide variety of technologies
Our knowledge base
209 Articles
Explore right
icons/logo-react.svg ReactJs
Popular JavaScript library for building user interfaces with a component-based architecture.
169 Articles
Explore right
icons/flutter.svg Flutter
UI toolkit for building natively compiled applications for mobile, web, and desktop from a single codebase.
150 Articles
Explore right
icons/logo-nodejs.svg Nodejs
JavaScript runtime for building scalable, high-performance server-side applications.
60 Articles
Explore right
icons/next-js.svg Nextjs
React framework enabling server-side rendering and static site generation for optimized performance.
40 Articles
Explore right
icons/code-outline.svg Typescript
Superset of JavaScript adding static types for improved code quality and maintainability.
39 Articles
Explore right
icons/tailwind.svg TailwindCSS
Utility-first CSS framework for rapid UI development.
130 Articles
Explore right
icons/code-outline.svg Golang
Programming language known for its simplicity, concurrency model, and performance.
70 Articles
Explore right
icons/code-outline.svg AstroJs
Astro is an all-in-one web framework. It includes everything you need to create a website, built-in.
40 Articles
Explore right
icons/code-outline.svg Jest
Versatile testing framework for JavaScript applications supporting various test types.
337 Articles
Explore right
icons/css-4.svg CSS
CSS3 is the latest version of Cascading Style Sheets, offering advanced styling features like animations, transitions, shadows, gradients, and responsive design.
Let's keep in Touch
Thank you for your interest in Tillitsdone! Whether you have a question about our services, want to discuss a potential project, or simply want to say hello, we're here and ready to assist you.
We'll be right here with you every step of the way.
Contact Information
rick@tillitsdone.com+66824564755
Find All the Ways to Get in Touch with Tillitsdone - We're Just a Click, Call, or Message Away. We'll Be Right Here, Ready to Respond and Start a Conversation About Your Needs.
Address
9 Phahonyothin Rd, Khlong Nueng, Khlong Luang District, Pathum Thani, Bangkok Thailand
Visit Tillitsdone at Our Physical Location - We'd Love to Welcome You to Our Creative Space. We'll Be Right Here, Ready to Show You Around and Discuss Your Ideas in Person.
Social media
Connect with Tillitsdone on Various Social Platforms - Stay Updated and Engage with Our Latest Projects and Insights. We'll Be Right Here, Sharing Our Journey and Ready to Interact with You.
We anticipate your communication and look forward to discussing how we can contribute to your business's success.
We'll be here, prepared to commence this promising collaboration.
DesignRush web design companies DesignRush
web design companies Goodfirms Goodfirms
Frequently Asked Questions
Explore frequently asked questions about our products and services.
Whether you're curious about features, warranties, or shopping policies, we provide comprehensive answers to assist you.