What are some examples of Flexbox layouts?

Can you show me some examples of Flexbox layouts?

Sure! Flexbox is a powerful layout tool in CSS. Here are a few examples:

1. A simple navigation bar.
2. A card layout for a gallery.
3. A responsive grid layout.

How do I create a responsive navigation bar using Flexbox?

To create a responsive navigation bar, you can use the following CSS:

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}

This will align your items horizontally and space them evenly.

What properties should I use to center items in a Flexbox container?

To center items in a Flexbox container, you can use:

• justify-content: center; for horizontal centering.
• align-items: center; for vertical centering.

Can you give me a code snippet for a card layout?

Absolutely! Here's a simple card layout using Flexbox:

.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.card {
  flex: 1 1 300px;
  margin: 10px;
}