What are some examples of using flex layout in web design?

What are some examples of using flex layout in web design?

Flex layout is a powerful tool for creating responsive designs. For example, you can use it to align items in a navigation bar or to create a card layout that adjusts based on screen size.

Can you show me a specific code example?

Sure! Here's a simple example:

.container {
  display: flex;
  justify-content: space-between;
}
.item {
  flex: 1;
  margin: 10px;
}

This will create a flexible container with items spaced evenly.

How does flexbox handle different screen sizes?

Flexbox is designed to be responsive. You can use media queries to adjust the flex properties based on the screen size, ensuring a great layout on all devices.

Are there any common pitfalls to avoid with flex layout?

Yes, one common pitfall is not setting a proper width for flex items, which can lead to unexpected layouts. Always test your design on various screen sizes.