How can I use Flexbox for responsive web design?

How can I use Flexbox for responsive web design?

Flexbox is a CSS layout model that allows you to design responsive layouts easily. You can use properties like display: flex;, flex-direction, and justify-content to control the layout.

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;
  margin: 10px;
}

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

How do I make it responsive for different screen sizes?

You can use media queries to adjust the flex-direction or other properties based on the screen size. For example:

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

What are some common pitfalls when using Flexbox?

Common pitfalls include not setting a height on the flex container, which can lead to unexpected behavior, and forgetting to use prefixes for older browsers.