CODEWITHSUNDEEP
htmlcssflexbox
Yas'ka
Yas'ka

Reputation: 97

How to make space between elements inside div container

I have a flex-container which will be dynamically filled by elements. Container doesn't have fixed width (I use max-width: max-content;) and can contain as many element as I want. The problem is that I need spacing between these elements, but don't need spacing on the left and right side between an element and the container.

Of course I can do it with .element{margin-right: 10px} and .element:last-child{margin-right: none;}, but is there a way to achieve it without pseudo-classes and JS?

<div class="container">
  <div class="element">my element</div>
  <div class="element">my element</div>
  ...
  <!-- nubmer of elements changing -->
  ...
</div>

Upvotes: 7

Views: 52802

Answers (4)

vals
vals

Reputation: 64264

Use the opposite aproach to the one that you have already suggested. Set all the elements except the first to have a margin left.

You can then use the sibling selector:

.container {
  display: inline-flex;
  border: solid 1px red;
}

.element {
  background: yellow;
}

.element + .element {
  margin-left: 20px;
}
<div class="container">
  <div class="element">my element</div>
  <div class="element">my element</div>
  <div class="element">my element</div>
  <div class="element">my element</div>
  <div class="element">my element</div>
  <div class="element">my element</div>
  <div class="element">my element</div>
  <div class="element">my element</div>
</div>

Upvotes: 1

GuCier
GuCier

Reputation: 7425

You can use flex with the column-gap property.

Also, setting justify-content: space-between will ensure an even space between elements if the width of the parent container increases.

.container {
  display: flex;
  column-gap: 20px;
  justify-content: space-between;
}

.element {
  background: yellow;
}
<div class="container">
  <div class="element">my element</div>
  <div class="element">my element</div>
  <div class="element">my element</div>
  <div class="element">my element</div>
  <div class="element">my element</div>
  <div class="element">my element</div>
  <div class="element">my element</div>
</div>

Upvotes: 17

Yas&#39;ka
Yas&#39;ka

Reputation: 97

I found CSS Multi-column Layout https://www.w3schools.com/CSS/css3_multiple_columns.asp, that's probably what I was looking for.

Upvotes: 0

kukkuz
kukkuz

Reputation: 42370

Container doesn't have fixed width (I use max-width: max-content;) and can contain as many element as I want.

You can use inline-flex container because inline elements will fit to the its contents and will stay in one row.

I need spacing between these elements, but don't need spacing on the left and right side between an element and the container.

You can set say a margin: 10px on the flex items and then set margin-left: 0 to the first flex item and margin-right: 0 to the last flex item - see demo below:

body {
  margin: 0;
}

.container {
  display: inline-flex;
  background: cadetblue;
}

.element {
  margin: 10px;
  background: pink;
  padding: 5px;
}

.element:first-child {
  margin-left: 0;
}

.element:last-child {
  margin-right: 0;
}
<div class="container">
  <div class="element">my element</div>
  <div class="element">my element</div>
  <div class="element">my element</div>
  <div class="element">my element</div>
  <div class="element">my element</div>
  <div class="element">my element</div>
  <div class="element">my element</div>
  <div class="element">my element</div>
  <div class="element">my element</div>
  <div class="element">my element</div>
</div>

Upvotes: 1

Related Questions