how to put a gap at the beginning and end of my grid using flexbox?

user_16919673 0
Viewed 108

I am trying to put a 50px gap to my grid, but I would like to have the same gap between each div, that is to say that there is also 50px from the beginning of the first div to the end of the last div. How can I do it?

.flex{
  display:flex;
  width:100%;
  background:yellow;
  align-items:center;
  flex-wrap: nowrap;
  overflow:auto;
  gap:50px;
}

.flex div{
 width:90px;
 background:red;
}
<div class="flex">
  <div> hello </div>
  <div> hello </div>
  <div> hello </div>
  <div> hello </div>
  <div> hello </div>
</div>

css
3 Answers

    .flex{
      display:flex;
      width:100%;
      background:yellow;
      align-items:center;
      flex-wrap: nowrap;
      overflow:auto;
    }

    .flex div{
     width:90px;
     background:red;
     margin-right: 50px;
    }
<div class="flex">
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
</div>

like this?

You can also use other flex properties like

        .flex{
          display:flex;
          width:100%;
          background:yellow;
          justify-content: space-evenly;
          align-items:center;
          flex-wrap: nowrap;
          overflow:auto;
        }

        .flex div{
         width:90px;
         background:red;
        }
    <div class="flex">
    <div>hello</div>
    <div>hello</div>

    </div>

or if you want the first element aswell

        .flex{
          display:flex;
          width:100%;
          background:yellow;
          align-items:center;
          flex-wrap: nowrap;
          overflow:auto;
        }

        .flex div{
         width:90px;
         background:red;
         margin-right: 50px;
        }

        .flex div:first-child{
         margin-left: 50px;
        }
    <div class="flex">
    <div>hello</div>
    <div>hello</div>
    <div>hello</div>
    <div>hello</div>
    <div>hello</div>
    </div>

user_37125310

You could add on the div.flex a left and right padding equals to the gap between child elements.

.flex {
  display: flex;
  width: 100%;
  background: yellow;
  align-items: center;
  flex-wrap: nowrap;
  overflow: auto;
  --gap: 50px;
  gap: var(--gap);
  padding: 0 var(--gap);
}

.flex div {
  width: 90px;
  background: red;
}
<div class="flex">
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
</div>

user_76405110

Add both pseudo element and leave them empty. You will trigger the gap:

.flex {
  display: flex;
  width: 100%;
  background: yellow;
  align-items: center;
  flex-wrap: nowrap;
  overflow: auto;
  gap: 50px;
}

.flex div {
  width: 90px;
  background: red;
}

.flex:before,
.flex:after {
  content:"";
}
<div class="flex">
  <div> hello </div>
  <div> hello </div>
  <div> hello </div>
  <div> hello </div>
  <div> hello </div>
</div>

user_86203330
Related