How to Set Distance Between Flexbox Items in 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 */
}