Currently Empty: ₹0.00
CSS Flex Flow
CSS CODES & EXAMPLES
CSS Flex Flow
Learn how the CSS flex-flow shorthand property combines flex-direction and flex-wrap to create flexible and responsive layouts with less code.
01
What is Flex Flow?
A shorthand property for direction and wrapping
The flex-flow property is a shorthand for
flex-direction and flex-wrap.
Instead of writing both properties separately, you can
combine them into one declaration.
flex-flow
:
direction
wrap
;
02
Flex Flow Syntax
Basic syntax
flex-flow.css
.container {
display: flex;
flex-flow: row wrap;
}
In this example, row controls the direction
and wrap allows the items to move onto new lines.
03
Flex Direction + Wrap
Two properties combined into oneSeparate Properties
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
→
Shorthand
.container {
display: flex;
flex-flow: row wrap;
}
04
flex-flow: row nowrap
Horizontal direction without wrapping
row-nowrap.css
.container {
display: flex;
flex-flow: row nowrap;
}1
2
3
4
05
flex-flow: row wrap
Horizontal direction with wrapping
row-wrap.css
.container {
display: flex;
flex-flow: row wrap;
gap: 15px;
}ITEM 1
ITEM 2
ITEM 3
ITEM 4
ITEM 5
ITEM 6
06
flex-flow: column wrap
Vertical direction with wrapping
When the direction is column, flex items are
arranged vertically. With wrap, additional
columns can be created when required.
column-wrap.css
.container {
display: flex;
flex-flow: column wrap;
gap: 15px;
}1
2
3
4
5
6
07
flex-flow: column-reverse wrap
Reverse vertical direction
column-reverse.css
.container {
display: flex;
flex-flow: column-reverse wrap;
}1
2
3
4
08
Common Flex Flow Values
Quick visual referencerow nowrap
1
2
3
Horizontal + one line
row wrap
1
2
3
4
Horizontal + multiple lines
column nowrap
1
2
3
Vertical + one column
column wrap
1
2
3
4
Vertical + multiple columns
09
Real Website Example
Responsive course cards
A course listing can use flex-flow: row wrap
so cards automatically move to another row when the available
width becomes smaller.
course-grid.css
.course-grid {
display: flex;
flex-flow: row wrap;
gap: 20px;
}
.course-card {
flex: 1 1 220px;
}Computer Fundamentals
Learn the basic concepts of computers.
Microsoft Office
Learn Word, Excel and PowerPoint.
Web Designing
Learn HTML, CSS and responsive design.
Tally & GST
Develop practical accounting skills.
10
Flex Flow vs Individual Properties
Understand the difference| Property | Purpose | Example |
|---|---|---|
flex-direction | Sets the main direction | row / column |
flex-wrap | Controls wrapping | wrap / nowrap |
flex-flow | Combines both properties | row wrap |
11
Important Points
Remember these rules
✓
flex-flow is a shorthand property.
✓
It combines flex-direction and
flex-wrap.
✓
The order of the two values does not have to match a fixed direction-first pattern.
✓
If one value is omitted, its corresponding property’s initial value is used.
12
Practice Task
Build a responsive course layout🎯 Create a Responsive Course Grid
Create six course cards using Flexbox. Use the
flex-flow shorthand instead of writing
flex-direction and flex-wrap
separately.
-
Use
display: flex; -
Use
flex-flow: row wrap; -
Add
gap: 20px; -
Use
flex: 1 1 220px;for the cards. - Test the layout on mobile and desktop.
13
CSS Flex Flow Live Example
Run the practical exampleLIVE PREVIEW