CODEWITHSUNDEEP
htmlcssflexbox
Jukker
Jukker

Reputation: 128

Modify "space around" width?

i have trouble understanding the space around property of justify content, in flexbox, look at this little pen to illustrate :

https://codepen.io/Ziratsu/pen/gewEPO

I want two div to be on the same line but separate with some distance, what the space around gives me here is good, but if I want to add more space between these two div ? And what if I want to shrink it?

I've searched and tried to add some Id's to my divs and change the margin or padding, but it's not working.

The HTML 

 <div class=conteneur1>
  <div class="sub"></div>
  <div class="sub"></div> 
</div>

the CSS

.conteneur1 {
  display: flex;
  justify-content: space-around;
}
.sub{
  border-style: solid;
  background: pink;
  width: 50px;
  height: 50px;
 }

I hope you get my question, I mean it's frustrating to not change the width between them as I wish to, and I hope it is possible, if not every pages on the internet will look the same with space around.

Upvotes: 0

Views: 1098

Answers (1)

Temani Afif
Temani Afif

Reputation: 273561

You can play with margin to increase/decrease the size between them

body {
  background: gray;
}

.conteneur1 {
  display: flex;
  justify-content: space-around;
}

.sub {
  border-style: solid;
  background: pink;
  width: 50px;
  height: 50px;
}
<div class=conteneur1>
  <div class="sub"></div>
  <div class="sub"></div>
</div>

<div class=conteneur1>
  <div class="sub" style="margin-right:30px;"></div>
  <div class="sub" style="margin-left:30px;"></div>
</div>
<div class=conteneur1>
  <div class="sub" style="margin-right:-30px;"></div>
  <div class="sub" style="margin-left:-30px;"></div>
</div>

Another idea is to use a hidden element between them to control the distance:

body {
  background: gray;
}

.conteneur1 {
  display: flex;
  justify-content: center;
}
.conteneur1:before {
  content:"";
  width:var(--s, 100px);
}

.sub {
  border-style: solid;
  background: pink;
  width: 50px;
  height: 50px;
}
.sub:first-child {
  order:-1;
}
.sub:last-child {
  order:2;
}
<div class=conteneur1>
  <div class="sub"></div>
  <div class="sub"></div>
</div>

<div class=conteneur1 style="--s:50px;">
  <div class="sub" ></div>
  <div class="sub"></div>
</div>
<div class=conteneur1 style="--s:150px;">
  <div class="sub"></div>
  <div class="sub"></div>
</div>

Or you can use two hidden elements on both sides to control the distance also:

body {
  background: gray;
}

.conteneur1 {
  display: flex;
}
.conteneur1:before,.conteneur1:after {
  content:"";
  width:var(--s, 100px);
}

.sub {
  border-style: solid;
  background: pink;
  width: 50px;
  height: 50px;
}
.sub:first-child {
  margin-right:auto;
}
.sub:last-child {
  margin-left:auto;
}
<div class=conteneur1>
  <div class="sub"></div>
  <div class="sub"></div>
</div>

<div class=conteneur1 style="--s:50px;">
  <div class="sub" ></div>
  <div class="sub"></div>
</div>
<div class=conteneur1 style="--s:150px;">
  <div class="sub"></div>
  <div class="sub"></div>
</div>

Upvotes: 1

Related Questions