How do I use Flexbox for responsive layouts?

How do I use Flexbox for responsive layouts?

Flexbox is a CSS layout model that allows you to design responsive layouts easily. You can align items, distribute space, and control the layout direction.

Can you give me an example of a Flexbox layout?

Sure! Here's a simple example:

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.item {
  flex: 1;
}

This will create a row of items that are evenly spaced.

How do I make it responsive for different screen sizes?

You can use media queries to adjust the Flexbox properties based on screen size. For example:

@media (max-width: 600px) {
  .container {
    flex-direction: column;
  }
}

What are some common Flexbox properties I should know?

Key properties include display: flex, flex-direction, justify-content, align-items, and flex-wrap. These control the layout and alignment of your items.