Let us look at a practical use case for the flex-direction property. A common requirement in web design is to create a navigation menu that adjusts its layout based on the screen size.
Typically, navigation menus are displayed horizontally on larger screens and vertically on smaller screens. Using flex-direction, we can achieve this seamlessly.
To see this in action, you can use your browser's developer tools to resize the viewport and observe the layout change. Below is a GIF showing how the navigation menu switches from a horizontal layout to a vertical layout as the screen size decreases.
Media Queries
In the above example, we used a media query to change the layout based on the screen size. A media query is a CSS technique used to apply styles based on the conditions such as the viewport size. This allows you to create responsive designs that adapt to different devices.
You will learn more about media queries in detail in an upcoming chapter. For now, understand that they help make your designs responsive and adaptable to various screen sizes.
