-1

I would like to display 3 items per row, but I want to include margin and border. Here's is a simple example, but I need to set valid flex property

.box {
  display: flex;
  flex-wrap: wrap;
  width: 1200px;
}

.item {
  display: flex;
  border: 1px solid #000;
  margin: 5px;
  flex: // ???
}
<div class="box">
  <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>
INeedYourHelp
  • 131
  • 1
  • 2
  • 8
  • Does this answer your question? [Force flex item to span full row width](https://stackoverflow.com/questions/48101046/force-flex-item-to-span-full-row-width) – Kunal Tanwar May 22 '22 at 14:55

3 Answers3

0

As far as I understood your question.

Instead of margin use gap property

.box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.item {
  flex: 1;
  width: 100%;
  height: 200px;
  border: 1px solid #000;
}

.item:nth-child(4),
.item:nth-child(5),
.item:nth-child(6) {
  flex: 0 1 100%;
}
<div class="box">
  <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>
Kunal Tanwar
  • 1,209
  • 1
  • 8
  • 23
0

I would probably do it like this: Seeing as you have specified a fixed width-value, you could just make each item have a max-width of 400px - border and margin. However, for a more dynamic layout, you could just use max-width: 1200px on box, so its resizable and responsive.

I prefer to use gap instead of margin in flex-layouts. With this, you can set each items max-width to 33.33% (for a 3 row layout), minus the 5px gap and the 1px border. Also, you don't have to use display: flex on the items, as they are already children of a flex-container (unless you plan to have more content inside them). This would produce this:

.box {
  display: flex;
  flex-wrap: wrap;
  max-width: 1200px;
  flex: 1; /* equal items */
  gap: 5px;
}

.item {
  border: 1px solid #000;
  width: 100%;
  max-width: calc(33.33% - 6px);
}
<div class="box">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

However, this is also achievable by using margin and a fixed width. Then you just have to use the items margin and border in the max-width calculation (5px + 5px + 1px + 1px). Keep in mind when using margin in the layout, its also going to affect the margin between the container and the items - not just the gap between the items.

.box {
  display: flex;
  flex-wrap: wrap;
  width: 1200px;
  flex: 1; /* equal items */
}

.item {
  border: 1px solid #000;
  height: 20px;
  margin: 5px;
  width: 100%;
  max-width: calc(33.33% - 12px);
}
<div class="box">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>

</div>
Sigurd Mazanti
  • 2,098
  • 1
  • 8
  • 24
0

I rather use flex-basis on child. 

.box {
  display: flex;
  flex-wrap: wrap;
  width: 1200px;
}

.item {
  display: flex;
  border: 1px solid #000;
  margin: 5px;
  flex-basis: 30%
}
<div class="box">
  <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>
Abi Ji
  • 184
  • 1
  • 4