How to Set Distance Between Flexbox Items in CSS?

css

You can set the distance between flexbox items in CSS using the justify-content and align-items properties.

To set the horizontal distance between flex items, use the justify-content property and set its value to space-between, space-around, space-evenly, or center. For example:

.container {
  display: flex;
  justify-content: space-between; /* sets horizontal distance */
}

To set the vertical distance between flex items, use the align-items property and set its value to flex-start, flex-end, center, or stretch. For example:

.container {
  display: flex;
  align-items: center; /* sets vertical distance */
}

You can also set specific distances using margins. For example:

.item {
  margin-right: 20px; /* sets horizontal distance between items */
  margin-bottom: 10px; /* sets vertical distance between items */
}

Latest Questions