flex不能在一个div中使用两个对齐 [英] flex can't use two justify for one div

问题描述

我需要为此使用flex的卡片清单布局.在大型设备上，一切正常，但是当设备变小，并且两张卡不能彼此相邻并且转到下一行时，我的内容不是中心

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>

请整页检查上面的示例，然后更改响应大小

推荐答案

为此使用CSS网格:

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

这篇关于flex不能在一个div中使用两个对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！