-1

I have two dropboxs like below screen.

Both are with the same width and same spacing to the outer box(Indicated by the black line) enter image description here

However, I would like to set the space between two selection box by 8px while keeping the width of both selection box, and the space between outer space the same as previously.

enter image description here

So, my way is to adjust the width of two selection box manually equally until I get gap matching to 8px.

May I know if there is a better way to do so? This way not only is slow, but also I cant get a exact 8 px for the gap.

I understand that I can add a space with 8px in between. But I also want to keep the original outer space of two drop box between the container. I want to know if there is a way to automatically to calculate what width I should set for two drop box in order to have a gap by 8px

user21357723
  • 93
  • 6

1 Answers1

0

The easiest way is to calculate the width of the elements. Alternatively you could use the gap property directly:

:root {
  --gap: 8px;
}

.container {
  display: flex;
  padding: var(--gap);
  gap: var(--gap);
}

.dropbox {
  width: calc((100% - var(--gap)) / 2);
}


/* for visualization purpose only */
.container {
  border: 2px dashed red;
}

.dropbox {
  border: 2px solid blue;
  height: 2em;
}
<div class="container">
  <div class="dropbox">1</div>
  <div class="dropbox">2</div>
</div>
tacoshy
  • 10,642
  • 5
  • 17
  • 34
  • This is what I needed. May I know how to reopen this question? I think this answer is relvant to my question instead of the recommended questions – user21357723 May 08 '23 at 08:01
  • If you want to reopen a question you should comment on your question and explain why the linked solutions do not work or apply to your case and use the reopen function. If 3 independent users with the reopen vote rights voting to reopen, then the question would be reopend. – tacoshy May 08 '23 at 08:02
  • @user21357723 you don't need to calculate any width, simply add flex:1 to the items and this is what the duplicates suggest (among other answers), read it. This answer does also exist in the duplicates – Temani Afif May 08 '23 at 08:12
  • alright, already edited, thanks May I ask if I can set the width as 100 % of sth else? like 100 % of the container width @tacoshy – user21357723 May 08 '23 at 08:12
  • @TemaniAfif, But if I set flex, it will changed my original spacing between outer container. Given that the outer space dont change, why dont I need to calculate the width ? I dont understand that sorry. – user21357723 May 08 '23 at 08:17
  • `flex: 1` will distribute the remaining space equally to all elements with that property and value. If both elements have the same width at the start, they will be sized equally to fill the remaining space inside the parent. If they don't, you have to calculate the width. IMHO it is the more redundant solution. – tacoshy May 08 '23 at 08:19
  • `flex-grow: 1` distribute the remaining space but `flex: 1` will make all the items equal whatever their initial width so you don't need any width calculation when you set `flex: 1` – Temani Afif May 08 '23 at 08:22
  • sorry i need some time to test it. Therefore I would leave a comment here first to let u guys know – user21357723 May 08 '23 at 09:18