--- title: "How do I set distance between flexbox items?" description: "How do I set distance between flexbox items?" author: "Sandra Emily" published: 2024-06-05 updated: 2024-06-06 canonical: https://www.mindstick.com/forum/160686/how-do-i-set-distance-between-flexbox-items category: "css-css3" tags: ["css-css3", "css", "css styling"] reading_time: 2 minutes --- # How do I set distance between flexbox items? How do I set [distance](https://www.mindstick.com/blog/12028/what-distance-learning-is-not) between [flexbox](https://www.mindstick.com/forum/156629/use-of-bootstrap-flexbox-how-to-use-it-with-the-help-of-bootstrap-library) [items](https://www.mindstick.com/forum/33812/getting-number-of-items-selected-in-uicollectionview-in-ios)? ## Replies ### Reply by Ashutosh Patel ### Set distance between flexbox items You can use the `gap`property to set the distance between flexbox items. The `gap`property is a brief of `row-gap` and `column-gap`, and it specifies the gap between the rows and columns of a grid or flex container. ## Using with flexbox ```css .container { display: flex; gap: 10px; /* Set the gap between flex items */ } ``` In the above syntax, The gap property is applied to a flex container with the `.container` class, and it sets a gap of `10px` between flex items. Also, you can use margins on flex items to create space between them ```css .item { margin-right: 10px; /* Set the right margin between flex items */ } ``` The `gap`property is recommended for creating space between flex items, as it is **cleaner** and **built-in**, especially when working with flexible layouts. ## Example- ```html Flexbox Example

Using "gap" property on parent element

Item-1
Item-2
Item-3
Item-4

Using "margin" in flex items

Item-1
Item-2
Item-3
Item-4
``` ## Output- ![How do I set distance between flexbox items?](https://www.mindstick.com/mindstickforums/0251b4cd-3626-4fb8-802e-47de04c9dc60/images/1fd254f6-df5b-493a-aee1-a6578504baf3.jpg) **Also, Read:** [How do you create a button with borderless CSS?](https://www.mindstick.com/forum/160685/how-do-you-create-a-button-with-borderless-css) --- Original Source: https://www.mindstick.com/forum/160686/how-do-i-set-distance-between-flexbox-items Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.