What are some practical examples of using CSS Flexbox?

What are some practical examples of using CSS Flexbox?

CSS Flexbox is great for creating responsive layouts. For example, you can use it to align items in a navigation bar or to create a card layout.

Can you show me a simple code snippet for a flexbox navigation bar?

Sure! Here's a basic example:

nav {
  display: flex;
  justify-content: space-between;
}
nav a {
  padding: 10px;
}

This will create a horizontal navigation bar with evenly spaced links.

What about using Flexbox for a grid layout?

You can use Flexbox to create a grid layout by setting the container to display: flex; and using flex-wrap: wrap;. Each item can have a defined width.

Are there any browser compatibility issues with Flexbox?

Flexbox is widely supported in modern browsers, but it's always good to check compatibility tables for older versions.