**Course Title:** Modern CSS: Responsive Design and Advanced Techniques **Section Title:** Flexbox: Modern Layout Techniques **Topic:** Build a responsive layout using Flexbox for flexible design components. (Lab topic) **Objective:** In this lab topic, we will explore how to build a responsive layout using Flexbox, focusing on flexible design components. By the end of this topic, you will be able to create flexible and responsive layouts using Flexbox, and apply these skills to real-world projects. **Introduction:** As we have learned in previous topics, Flexbox is a powerful layout system that allows us to create flexible and responsive layouts. In this lab topic, we will dive deeper into the world of Flexbox and explore how to build a responsive layout using this technology. We will focus on creating flexible design components that can adapt to different screen sizes and devices. **Building a Responsive Layout with Flexbox:** To build a responsive layout with Flexbox, we need to understand how to use the following properties: * `display: flex` or `display: inline-flex` * `flex-direction` * `justify-content` * `align-items` * `flex-wrap` * `flex-grow` * `flex-shrink` Let's create a simple responsive layout using Flexbox. We will create a container element with three child elements, each representing a flexible design component. **HTML:** ```html <div class="flex-container"> <div class="flex-item">Item 1</div> <div class="flex-item">Item 2</div> <div class="flex-item">Item 3</div> </div> ``` **CSS:** ```css .flex-container { display: flex; flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; } .flex-item { width: 30%; margin: 10px; padding: 20px; background-color: #f2f2f2; border: 1px solid #ccc; } /* Media query for small screens */ @media (max-width: 768px) { .flex-container { flex-direction: column; } .flex-item { width: 100%; } } ``` In this example, we have created a flexible container element with three child elements, each representing a design component. We have used the `flex-direction` property to set the direction of the flexible items, `justify-content` to distribute the items evenly, and `align-items` to center the items vertically. We have also used the `flex-wrap` property to wrap the flexible items to a new line when the screen size is too small. This creates a responsive layout that adapts to different screen sizes. **Media Queries:** To make our layout even more responsive, we can use media queries to target different screen sizes and devices. In the example above, we have used a media query to target small screens and changed the direction of the flexible items to column. **Key Concepts:** * `display: flex` or `display: inline-flex` is used to create a flexible container element. * `flex-direction` is used to set the direction of the flexible items. * `justify-content` is used to distribute the flexible items evenly. * `align-items` is used to center the flexible items vertically. * `flex-wrap` is used to wrap the flexible items to a new line when the screen size is too small. * Media queries can be used to target different screen sizes and devices. **Practical Takeaways:** * Use Flexbox to create flexible and responsive layouts. * Use media queries to target different screen sizes and devices. * Use the `flex-direction` property to set the direction of the flexible items. * Use the `justify-content` property to distribute the flexible items evenly. * Use the `align-items` property to center the flexible items vertically. **Challenge:** Try to recreate the example above and experiment with different Flexbox properties to create a responsive layout. Use media queries to target different screen sizes and devices. **Additional Resources:** * MDN Web Docs: [Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) * W3C: [Flexbox](https://www.w3.org/TR/css-flexbox-1/) * CSS Tricks: [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) **Leave a comment or ask for help:** If you have any questions or need help with this topic, please leave a comment below. We will be happy to assist you. In the next topic, we will explore the world of CSS Grid and its use cases. Stay tuned for more exciting content!