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

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>

CodePudding user response：

    .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>

CodePudding user response：

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>

CodePudding user response：

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>