Curriculum

CSS Advanced

CSS Rounded Corners

0/1

CSS Border Images

0/1

CSS Backgrounds

0/1

CSS Colors

0/1

CSS Color Keywords

0/1

CSS Gradients

0/3

CSS Shadow

0/2

CSS Text Effects

0/1

CSS Web Fonts

0/1

CSS 2D Transforms

0/1

CSS 3D Transforms

0/1

CSS Transitions

0/1

CSS Animations

0/1

CSS Tooltip

0/1

CSS Style Images

0/1

CSS Image Reflection

0/1

CSS object-fit

0/1

CSS object-position

0/1

CSS Masking

0/1

CSS Buttons

0/1

CSS Pagination

0/1

CSS Multiple Columns

0/1

CSS User Interface

0/1

CSS Variables

0/4

CSS Box Sizing

0/1

CSS Media Queries

0/1

CSS MQ Examples

0/1

CSS Flexbox

0/4

Text lesson

CSS Flex Responsive

Responsive Flexbox

From the CSS Media Queries chapter, you’ve discovered the ability to utilize media queries for crafting distinct layouts tailored to diverse screen sizes and devices..

For instance, to establish a two-column layout for larger screen sizes and a one-column layout for smaller screens like phones and tablets, you can adjust the flex-direction from row to column at a designated breakpoint (e.g., 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;
}
}

An alternative approach involves modifying the percentage of the flex property of the flex items to generate varying layouts tailored to distinct screen sizes. It’s important to note that for this example to function properly, 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

Utilize flexbox to craft a responsive image gallery that adjusts its layout between displaying four, two, or full-width images based on the screen size.

Responsive Website using Flexbox

Employ flexbox to design a responsive website featuring a dynamic navigation bar and adaptable content layout.