CSS flex make block exactly a 3rd-CodePudding

I have a demo here

It's a simple css layout using flex to create a grid of 6 block, 3 across.

I'm using flex: 0 0 33%; to make the blocks a3rd of the width but there is slight space on the right side doing this.

If I try flex: 0 0 33.33333%; it makes the blocks 2 across.

Is it possible to have the blocks exactly 3 across

CodePudding user response：

Use flex: 1 0 33%; to allow the children to grow to fill the slight space between the elements:

html,
body {
  margin: 0;
}

.container {
  display: flex;
  justify-content: space-between;
}

.box {
  flex: 1 0 33%;
  box-sizing: border-box;
  border: 1px solid #777;
  height: 200px;
}

<div >
  <div ></div>
  <div ></div>
  <div ></div>
</div>

Using flex: 0 1 33.34% will have the same effect, BTW, this time allowing the children to shrink from a slighly too wide width. Also note that I used box-sizing: border-box in both cases to include the border width in the calculated element width:

html,
body {
  margin: 0;
}

.container {
  display: flex;
  justify-content: space-between;
}

.box {
  flex: 0 1 33.34%;
  box-sizing: border-box;
  border: 1px solid #777;
  height: 200px;
}

<div >
  <div ></div>
  <div ></div>
  <div ></div>
</div>

CodePudding user response：

The issue is with the border (well - the 1px width of your border) property that is adding an additional 2px inline to every .block.

You can avoid this by using box-sizing: border-box with the 33.33% width value. The box sizing is set to content-box in the default user agent CSS, which means that properties like border-width and padding will add to the size of the box, whereas border-box sets the size first and then add the border-width and padding inside the dimensions of your box.

You can read more about box-sizing on the Mozilla Developer Network

.wrap {
  border: 1px solid grey;
  max-width: 1000px;
  display: flex;
  flex-wrap: wrap;
}

.block {
  height: 200px;
  border: 1px solid red;
  flex: 0 0 33.33%;
  box-sizing: border-box;
}

<div >
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
</div>