CSS FLEX CONTENT
The direct child elements of a flex container automatically becomes flexible (flex) items.
The flex item properties are:
order
flex-grow
flex-shrink
flex-basis
flex
- align-self
CSS FLEX RESPONSIVE
Flex-Box responsive 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 direction
from row
to column at specific breakpoint.
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%;
}
}