Flex Direction, Wrapping and Alignment
What Is It?
Flex container properties define the main axis, line wrapping, and alignment. These controls depend on available space and the chosen direction.
Properties, Tags and Attributes Explained
flex-direction: row, column, row-reverse, or column-reverse sets the main axis direction.flex-wrap: wrap permits multiple lines; nowrap keeps one line.flex-flow: Shorthand for direction and wrapping.align-content: Distributes flex lines in a multi-line container with spare cross-axis space.row-gap / column-gap: Set the gutters in each direction.
Each example is a complete HTML page. The CSS is inside the head's style element. Use Try in new tab to edit the CSS or HTML, run your changes, and reset the example.
Example 1: Column axis
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex Direction, Wrapping and Alignment</title>
<style>
.demo > div { background: #dbeafe; padding: 12px; border: 1px solid #93c5fd; }
.demo { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
</style>
</head>
<body>
<div class="demo"><div>One</div><div>Two</div><div>Three</div></div>
</body>
</html>What you see: Items stack vertically and align to the cross-axis start.
Example 2: Wrap 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 Direction, Wrapping and Alignment</title>
<style>
.demo > div { background: #dbeafe; padding: 12px; border: 1px solid #93c5fd; }
.demo { display: flex; flex-flow: row wrap; width: 260px; max-width: 100%; height: 220px; align-content: space-between; gap: 8px; }
.demo > div { width: 90px; }
</style>
</head>
<body>
<div class="demo"><div>One</div><div>Two</div><div>Three</div></div>
</body>
</html>What you see: Items wrap into lines; spare vertical space separates the lines.
Example 3: Set row and column gaps independently
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex Direction, Wrapping and Alignment</title>
<style>
.row { display: flex; flex-wrap: wrap; max-width: 240px; row-gap: 24px; column-gap: 8px; }
span { flex: 0 0 90px; background: #dbeafe; padding: 12px; }
</style>
</head>
<body>
<div class="row"><span>One</span><span>Two</span><span>Three</span><span>Four</span></div>
</body>
</html>What you see: Wrapped rows have a 24px gutter while neighboring columns have an 8px gutter. Use separate gaps when vertical rhythm and horizontal spacing differ.
When and Where to Use It
Use direction changes for mobile toolbars and wrapping for tags or card rows.
Common Mistake or Useful Tip
Reverse directions change visual order without changing DOM reading order. align-content needs multiple flex lines and available space.
Try It Yourself
Change align-content from space-between to flex-start.