Responsive Flexbox
You learned from the CSS Media Queries chapter that you can use media queries to create different layouts for different screen sizes and devices.
Example
Formatted code
.flex-container {
display: flex;
flex-direction: row;
} .flex-item {
background-color: #f1f1f1;
padding: 10px;
font-size: 30px;
text-align: center;
width: 100%;
}
/* Make a one column-layout instead of three-column layout */
@media
(max-width: 600px) { .flex-container {
flex-direction: column;
}
}Live preview
Another way is to change the percentage of the flex property of the flex items to create different layouts for different screen sizes. Note that we also have to include flex-wrap: wrap; on the flex container for this example to work:
Example
Formatted code
.flex-container {
display: flex;
flex-wrap: wrap;
} .flex-item {
background-color: #f1f1f1;
padding: 10px;
text-align: center;
font-size: 30px;
flex: 33.3%;
}
/* Make a one
column-layout instead of a three-column layout */
@media (max-width: 600px) { .flex-item {
flex: 100%;
}
}Live preview
Responsive Image Gallery using Flexbox
Here, we use media queries together with flexbox to create a responsive image gallery:
Responsive Website using Flexbox
Use flexbox to create a responsive website, containing a flexible navigation bar and flexible content: