CSS Flex Responsive
Responsive Flexbox
You may use media queries to construct layouts that are specific to different screen sizes and devices, as you discovered in the CSS Media Queries chapter.
For example, you can change the flex-direction from row to column at a specified breakpoint (800px in the example below) if you want to create a one-column style for small screen sizes (such phones and tablets) and a two-column layout for most screen sizes:
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;
}
}
An additional method to generate distinct layouts for varying screen sizes is to modify the percentage of the flex attribute of the flex objects. Keep in mind that in order for this example to function, flex-wrap: wrap; must also be included on the flex container:
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
Create a responsive picture gallery with flexbox that alternates between four, two, and full-width images based on the size of the screen:
------WEB MUKAVI----
Responsive Website using Flexbox
Create a responsive website with a flexible navigation bar and flexible content by using flexbox:
