CSS Flex Container Properties
These properties go on the flex container element itself:
display— needs the valueflexorinline-flexflex-direction— picks the direction flex items are laid out inflex-wrap— decides if flex items may wrapflex-flow— shorthand combiningflex-directionandflex-wrapjustify-content— positions flex items along the main axis (horizontally) when they leave some of its space unusedalign-items— positions flex items along the cross axis (vertically) when they leave some of its space unusedalign-content— positions the flex lines when items wrap and the cross axis has extra space
CSS flex-direction Property
Use flex-direction to choose which way the items inside a flex container run. Its four possible values are:
row(default)columnrow-reversecolumn-reverse
Row direction
With row, which applies by default, flex items sit side by side from left to right.
Prompt
Create a flex container with three numbered items (1, 2, 3) using flex-direction: row. The container should have a DodgerBlue background, and each item should have a white background, 10px margin, 20px padding, and 30px font size.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex Direction Row</title>
<style>
.flex-container {
display: flex;
flex-direction: row;
background-color: DodgerBlue;
}
.flex-container div {
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
}
</style>
</head>
<body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
Column direction
With column, flex items stack vertically, starting at the top and ending at the bottom.
Prompt
Create a flex container with three numbered items (1, 2, 3) using flex-direction: column. The container should have a DodgerBlue background, and each item should have a white background, 10px margin, 20px padding, and 30px font size.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex Direction Column</title>
<style>
.flex-container {
display: flex;
flex-direction: column;
background-color: DodgerBlue;
}
.flex-container div {
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
}
</style>
</head>
<body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
Row reverse direction
Still horizontal, row-reverse runs the flex items from right to left instead.
Prompt
Create a flex container with three numbered items (1, 2, 3) using flex-direction: row-reverse. The container should have a DodgerBlue background, and each item should have a white background, 10px margin, 20px padding, and 30px font size.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex Direction Row Reverse</title>
<style>
.flex-container {
display: flex;
flex-direction: row-reverse;
background-color: DodgerBlue;
}
.flex-container div {
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
}
</style>
</head>
<body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
Column reverse direction
Still vertical, column-reverse runs the flex items from bottom to top instead.
Prompt
Create a flex container with three numbered items (1, 2, 3) using flex-direction: column-reverse. The container should have a DodgerBlue background, and each item should have a white background, 10px margin, 20px padding, and 30px font size.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex Direction Column Reverse</title>
<style>
.flex-container {
display: flex;
flex-direction: column-reverse;
background-color: DodgerBlue;
}
.flex-container div {
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
}
</style>
</head>
<body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
CSS flex-wrap Property
When one flex line has too little room for all the items, flex-wrap decides whether they move onto further lines. You can choose from:
nowrap(default)wrapwrap-reverse
Nowrap
By default, nowrap keeps every flex item on the one line, with no wrapping.
Prompt
Create a flex container with nine numbered items (1 through 9) using flex-wrap: nowrap. The container should have a DodgerBlue background and be 200px wide. Each item should have a white background, 10px margin, 20px padding, and 30px font size.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex Wrap Nowrap</title>
<style>
.flex-container {
display: flex;
flex-wrap: nowrap;
width: 200px;
background-color: DodgerBlue;
}
.flex-container div {
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
}
</style>
</head>
<body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
</html>
Wrap
With wrap, flex items move onto new lines whenever they need to.
Prompt
Create a flex container with nine numbered items (1 through 9) using flex-wrap: wrap. The container should have a DodgerBlue background and be 200px wide. Each item should have a white background, 10px margin, 20px padding, and 30px font size.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex Wrap Wrap</title>
<style>
.flex-container {
display: flex;
flex-wrap: wrap;
width: 200px;
background-color: DodgerBlue;
}
.flex-container div {
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
}
</style>
</head>
<body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
</html>
Wrap reverse
Flex items also move onto new lines under wrap-reverse when they need to, only in reverse order.
Prompt
Create a flex container with nine numbered items (1 through 9) using flex-wrap: wrap-reverse. The container should have a DodgerBlue background and be 200px wide. Each item should have a white background, 10px margin, 20px padding, and 30px font size.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex Wrap Reverse</title>
<style>
.flex-container {
display: flex;
flex-wrap: wrap-reverse;
width: 200px;
background-color: DodgerBlue;
}
.flex-container div {
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
}
</style>
</head>
<body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
</html>
CSS flex-flow Property
Rather than writing flex-direction and flex-wrap separately, you can set both on one line with the shorthand flex-flow property.
Example
Prompt
Create a flex container with three numbered items (1, 2, 3) using the flex-flow shorthand set to "row wrap". The container should have a DodgerBlue background, and each item should have a white background, 10px margin, 20px padding, and 30px font size.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex Flow</title>
<style>
.flex-container {
display: flex;
flex-flow: row wrap;
background-color: DodgerBlue;
}
.flex-container div {
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
}
</style>
</head>
<body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
Flex Container Subpages
Two more pages carry on with the flex container properties:
justify-content— aligning flex items horizontallyalign-itemsandalign-content— aligning vertically, and true centering