Flex box to have equal white space on both the ends

Question

I have this Code pen

where I have a simple flexbox with flex-wrap set to wrap and plenty of flex box items. I want all the flex items to align left but at the same I want my flexbox to have equal extra white space horizontally on both the ends for example

On the above screenshot if a flex item cannot continue on the same row it is align to the next row which causes some extra white space on right side, I don't want flex items to align center because this way it would center the last row with few orange boxes to the center but it should be left aligned with equal white space on both right and left of flex box

something like below

On above screenshot items left align but both left and right side have equal whitespace.

Setting margin to left solves the problem to particular screen size but the responsiveness is not there. In other screen size I stuck with the same issue. could someone please confirm if this is possible no matter which screen size is used

.flexbox {
  display: flex;
  flex-wrap: wrap;
}

.flex-items {
  height: 2rem;
  width: 2rem;
  padding: 1rem;
  margin: 1rem;
  background-color: orangered;
}

<div class="flexbox">
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
</div>

Does this answer your question? [Flex-box: Align last row to grid](https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid) — InSync, Apr 01 '23 at 15:28
Grid is for 2d layout, in my scenario I don’t need a 2d layout — gs650x, Apr 02 '23 at 05:39
@gs650x: what you have is elements that run left-to-right over multiple lines, all of which appear to be the same height and width. While you may not consider it "3d," it's - frankly - a meaningless distinction to make; CSS grid would make this just as easily as flex and - depending on the sizing of the items - may make it easier to code regardless of "dimensionality." A simple example of how both could be used: https://jsfiddle.net/davidThomas/apk1d29L/ — David Thomas, Apr 02 '23 at 17:01

ash · Answer 1 · 2023-04-02T03:13:14.820

.parent{ display:flex;
  align-items:center;
  justify-content:center;}
.flexbox {
  width: 80vw;
  display:flex;
  flex-wrap:wrap;
}



.flex-items {
 height:2rem;
  width:2rem;
  padding: 1rem;
  margin:1rem;
  background-color:orangered;
}

<div class="parent">
<div class="flexbox">
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
</div>
  </div>

Made change as mentioned like: By adding justify-content: center https://codepen.io/ash_0001/pen/eYLwMeb As such you want to align them in the center you need to assign a new parent div which will help for that and in the meanwhile it will be required to attach some responsive width to it so it can be sophisticated according to desires.

What is the problem can you mention it so I can improve my answer — ash, Apr 01 '23 at 15:24
This does not serve the purpose as I have mentioned in my question flex items should be left aligned with equal white space on either side of the flex box. — gs650x, Apr 01 '23 at 15:24
Please take a look to the 2nd screenshot I have posted which has the desired output and check the last row of your answer both are not the same. — gs650x, Apr 01 '23 at 15:27
This increases white space on both the sides, it should be consuming 100% of the width with equal what space which is left increasing white space on both the direction also doesn't serve the purpose. — gs650x, Apr 01 '23 at 15:44

Flex box to have equal white space on both the ends

1 Answers1