How to put arbitrary distance between two flex elements?

Question

I faced a challenge in Flexbox.

I want to define an arbitrary distance between two flexible elements.

I know should to use justify-content, but I can't set a specific distance using it.

I don't want using from margin or anything like that.
I want to do it using flex

.box{
    display: flex;
    justify-content: space-between;
}

.item{
    background-color: rgb(255, 157, 0);
    width: 50px;
    height: 50px;
}

<div class="box">
    <div class="item"></div>
    <div class="item"></div>
</div>

I am eager to see your solution:)

Sounds like [an XY problem](https://xyproblem.info). Why would you want to do that? — InSync, Jun 04 '23 at 13:54
There are many ways to *"change the space created between [these] two elements"*. I can think of seven off-the-bat. Please add more detail to your question. What exactly are you trying to achieve? — Michael Benjamin, Jun 04 '23 at 14:19
I put two elements together using flexbox. Both elements should be placed together with a distance of about 40px, but I don't want to use `margin` or anything like that. I just wanted to know if it is possible to specify the spacing created by the `justify-content: space-between` property manually or use another flex property. — Mehrshad, Jun 04 '23 at 14:34
@Mehrshad Why would it not be? See also [the docs](https://developer.mozilla.org/en-US/docs/Web/CSS/gap), [the spec](https://drafts.csswg.org/css-align/#gap-shorthand) and [browser support table](https://caniuse.com/mdn-css_properties_gap). — InSync, Jun 04 '23 at 19:25
@InSync Thank you for your guidance✔️ I will definitely read more about it — Mehrshad, Jun 04 '23 at 19:43

score 1 · Answer 1 · answered Jun 04 '23 at 13:44

space-between does exactly what it says, it adds space between the elements. If you want to reduce the space, you should also say how to reduce the space: e.g. increasing the size of boxes, increasing the space between the item and the border, and so on.

I provide you 3 solutions:

1. Using `space-evenly` in place of `space-between`. It will space the elements evenly considering also the container border as an element:

.box{
    display: flex;
    justify-content: space-evenly;
}

.item{
    background-color: rgb(255, 157, 0);
    width: 50px;
    height: 50px;
}

<div class="box">
    <div class="item"></div>
    <div class="item"></div>
</div>

2. Adding margins to elements. In this way, you can decide how far you can get the element from the container border. In my example I use a value of 100px:

.box{
    display: flex;
    justify-content: space-between;
}

.item{
    background-color: rgb(255, 157, 0);
    width: 50px;
    height: 50px;
    margin: 0 100px;
}

<div class="box">
    <div class="item"></div>
    <div class="item"></div>
</div>

Note that I don't need to distinguish margin-left/margin-right because the unused margin gets just absorbed by flex.

3. Using `flex-grow`, this will allow items to grow and use more space when available:

.box{
    display: flex;
    justify-content: space-between;
}

.item{
    background-color: rgb(255, 157, 0);
    width: 50px;
    height: 50px;
    flex-grow: 0.1;
}

<div class="box">
    <div class="item"></div>
    <div class="item"></div>
</div>

I hope that one or more of these solutions helped you

How to put arbitrary distance between two flex elements?

1 Answers1

1. Using space-evenly in place of space-between. It will space the elements evenly considering also the container border as an element:

2. Adding margins to elements. In this way, you can decide how far you can get the element from the container border. In my example I use a value of 100px:

3. Using flex-grow, this will allow items to grow and use more space when available:

1. Using `space-evenly` in place of `space-between`. It will space the elements evenly considering also the container border as an element:

3. Using `flex-grow`, this will allow items to grow and use more space when available: