CSS Flex Responsive
Responsive Flexbox
You learned from the Media Queries chapter that you can use media queries to create different layouts for different screen sizes and devices.
For example, if you want to create a two-column layout for most screen sizes, and
a one-column layout for small screen sizes (such as phones
and tablets), you can change the flex-direction from row to column
at a specific breakpoint (800px in the example below):
Example
.flex-container {
display: flex;
flex-direction: row;
}
/* Responsive layout - makes a one column layout instead of a two-column
layout */
@media (max-width: 800px) {
.flex-container {
flex-direction: column;
}
}
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
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-item-left {
flex: 50%;
}
.flex-item-right {
flex: 50%;
}
/* Responsive layout - makes a one column layout instead of a two-column
layout */
@media (max-width: 800px) {
.flex-item-right,
.flex-item-left {
flex: 100%;
}
}
Responsive Image Gallery using Flexbox
Use flexbox to create a responsive image gallery that varies between four, two or full-width images, depending on screen size:
Try it Yourself »Responsive Website using Flexbox
Use flexbox to create a responsive website, containing a flexible navigation bar and flexible content:
Try it Yourself »CSS Flexbox Properties
The following table lists the CSS properties used with flexbox:
| Property | Description |
|---|---|
| display | Specifies the type of box used for an HTML element |
| flex-direction | Specifies the direction of the flexible items inside a flex container |
| justify-content | Horizontally aligns the flex items when the items do not use all available space on the main-axis |
| align-items | Vertically aligns the flex items when the items do not use all available space on the cross-axis |
| flex-wrap | Specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line |
| align-content | Modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines |
| flex-flow | A shorthand property for flex-direction and flex-wrap |
| order | Specifies the order of a flexible item relative to the rest of the flex items inside the same container |
| align-self | Used on flex items. Overrides the container's align-items property |
| flex | A shorthand property for the flex-grow, flex-shrink, and the flex-basis properties |
