0

I am trying to remove outer left and right margins on the first and last items in a row of flex items. Using nth() isn't an option since the first and last in a row will be dynamic depending on screen size. The only option I found for the below code was to add a negative margin to the container:

  margin-left: -30px;
  margin-right: -30px;

but that feels "hacky". Are there are any other solutions?

body, html {
  background: grey;
  height: 100%;
}
.container {
  display: flex;  
  height: 100%;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  align-items: center;
}
.container div {
  height: 60px;
  flex: 1 1 600px;
  background: green;
  margin: 20px;
}
<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
RicardoAlvveroa
  • 226
  • 1
  • 8
  • 1
    Even the most famous framework does it that way. I think you can use it with peace of mind. No other solution comes to mind. https://getbootstrap.com/docs/5.0/layout/grid/#example – BOZ Jan 13 '21 at 07:11
  • It's not hacky..it's a good solution. Another solution is using grid – Osama Jandali Jan 13 '21 at 07:15
  • _“but that feels "hacky"”_ - why? Giving anything a _positive_ margin to achieve what was needed in the current situation, probably (rarely) ever felt hacky, right? So what’s different here now? – CBroe Jan 13 '21 at 07:35

1 Answers1

-1
body, html {
      background: grey;
      height: 100%;
    padding: 0px;
    margin: 0px;
    }
    .container {
      display: flex;  
      height: 100%;
      flex-wrap: wrap;
      justify-content: center;
      align-content: center;
      align-items: center;
    }
    .container div {
      height: 60px;
      flex: 1 1 600px;
      background: green;
      margin: 20px 0px;
    }
Dharman
  • 30,962
  • 25
  • 85
  • 135
Đỗ văn Thắng
  • 185
  • 6