flex can't use two justify for one div

问题

I need a card list layout for this I use flex. in large device everything is ok but when device becomes small and two cards can't be next to each other and go to the next line, my content it's not center

in other words, I need to center my content in all device size and when two cards come together should be space-between and center

.container-card {
  background-color: grey;
  direction: rtl;
}

.container-holder {
  background-color: gold;
  width: calc(100% - 28px);
  max-width: 1004px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.request-box {
  width: 481px;
  height: 417px;
  border-radius: 15px;
  border: solid 1px #adadad;
  background-color: #ffffff;
  margin-top: 15px;
  margin-bottom: 15px;
  margin: 15px 2px;
}

<div class="container-card">
  <div class="container-holder">
    <div class="request-box"></div>
    <div class="request-box"></div>
    <div class="request-box"></div>
  </div>
</div>

Please check the example above in full-page and change the responsive size

回答1:

Use CSS grid for this:

.container-card {
  background-color: grey;
  direction: rtl;
}

.container-holder {
  background-color: gold;
  width: calc(100% - 28px);
  max-width: 1004px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(481px, 1fr));
  place-items: center;
  grid-column-gap: 30px;
}

.request-box {
  width: 481px;
  height: 417px;
  border-radius: 15px;
  border: solid 1px #adadad;
  background-color: #ffffff;
  margin: 15px 0;
}

<div class="container-card">
  <div class="container-holder">
    <div class="request-box"></div>
    <div class="request-box"></div>
    <div class="request-box"></div>
  </div>
</div>

回答2:

Hope this is helpful for you all in center align and i`m not use any mediaquery same code work on small screens .

.container-card {
            background-color: grey;
        }
        
        .container-holder {
            background-color: #ffd700;
            width: calc(100% - 28px);
            max-width: 1004px;
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            margin: 0 auto;
            text-align: center;
        }
        
        .request-box {
            width: 481px;
            height: 417px;
            border-radius: 15px;
            border: solid 1px #adadad;
            background-color: #ffffff;
            margin-top: 15px;
            margin-bottom: 15px;
            margin: 15px 2px;
        }

<div class="container-card">
    <div class="container-holder">
        <div class="request-box"></div>
        <div class="request-box"></div>
        <div class="request-box"></div>
    </div>
</div>

回答3:

to set the cards netx to each other in small devices you can use this media query:

@media(max-width: 400px){
    .container-holder {
       justify-content: space-around;
    }

    .request-box {
       width: 45%;
    }
}

test it . it works nicely!

来源：https://stackoverflow.com/questions/59747337/flex-cant-use-two-justify-for-one-div