Flexbox space-between with even item distribution

user_12911020 0
Viewed 48

I'm trying to archive even space between flexbox items, but the justify-content: space-between does not seem to work as I expected. I need each item to have a width of 4px. I know I can use justify-content:space-evenly, but then the first and last item are not and the start/end of the box. I also tried setting margin-right: auto on the items, but it does not work either. There have to be 40 items. Do you know any other solution to this?

.container {
  background: blue;
  display: flex;
  justify-content: space-between;
  height: 20px;
  width: 300px;
}
.item{
     width: 4px;
     border-radius: 4px;
     background: black;
}
<div class="container">
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>
                
</div>

Codepen: https://codepen.io/marcin-sieradzki/pen/XWjGKYx

flexbox css html
1 Answers

You can use margin-left .item

.item {
      margin-left: 5px;
 }

Example:

.container {
  background: blue;
  display: flex;
  justify-content: space-between;
  height: 20px;
  width: 300px;
}

.item {
  width: 4px;
  margin-left: 5px;     /* add this */
  border-radius: 4px;
  background: black;
}
<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

user_145789910
Related