Question

我希望将页面中的元素列表居中，而不会对元素进行重新定义，同时尽可能地在同一行中使用。我设法为每个屏幕大小设置几个@media规则，从每行1个元素到4个元素，但是我想知道是否有办法以适合任何方式的方式进行操作页面的宽度是。以下是我尝试和运作的内容：

＆＃13;

.container {
  display: flex;
  width: max-content;
  flex-wrap: wrap;
  flex-direction: row;
  margin-left: auto;
  margin-right: auto;
}

@media only screen and (min-width: 294px) { .container {
  width: 290px;
}}
@media only screen and (min-width: 584px) { .container {
    width: 580px;
}}
@media only screen and (min-width: 874px) { .container {
    width: 870px;
}}
@media only screen and (min-width: 1164px) { .container {
    width: 1160px;
}}

.rectangle {
  width: 286px;
  height: 180px;
  margin-right: 2px;
  margin-left: 2px;
  margin-bottom: 24px;
  background: #aeaeae;
}

＆＃13;

<div class="container">
  <div class="rectangle"></div>
  <div class="rectangle"></div>
  <div class="rectangle"></div>
  <div class="rectangle"></div>
  <div class="rectangle"></div>
</div>

＆＃13;

Answer 1

如果我理解正确，您希望将所有适合一行的项目居中 - 那么您可以使用justify-content替换媒体查询

DEMO

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
}

.rectangle {
  width: 286px;
  height: 180px;
  margin-right: 2px;
  margin-left: 2px;
  margin-bottom: 24px;
  background: #aeaeae;
}

Answer 2

尝试完成此操作时我喜欢做的是在容器上设置text-align: center;（在您的情况下为.container）。然后，对于您希望居中的元素，将display属性设置为display: inline-block;（在您的情况下为.rectangle）。这将把适合的元素放在一行上。任何不适合下一个的东西，仍然是中心的。调整窗口大小时，元素会根据需要向下移动到下一行。

将您的CSS更改为：

    .rectangle {
  width: 286px;
  height: 180px;
  margin-right: 2px;
  margin-left: 2px;
  margin-bottom: 24px;
  background: #aeaeae;
  display: inline-block
}
   .container {
  /*display: flex;
  width: max-content;*/
  flex-wrap: wrap;
  flex-direction: row;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

您需要在.container中注释掉前两行才能使其正常工作。希望这适合你！

编辑：我原本以为你想让你的元素居中。现在我不确定。如果您希望后续行中的元素与您的代码段一样保持对齐，请将text-align: center;更改为text-align: left;。

＆＃13;

.rectangle {
            width: 286px;
            height: 180px;
            margin-right: 2px;
            margin-left: 2px;
            margin-bottom: 24px;
            background: #aeaeae;
            display: inline-block;
        }

        .container {
            /*display: flex;
            width: max-content;*/
            flex-wrap: wrap;
            flex-direction: row;
            margin-left: auto;
            margin-right: auto;
            text-align: center;
        }

＆＃13;

<div class="container">
        <div class="rectangle"></div>
        <div class="rectangle"></div>
        <div class="rectangle"></div>
        <div class="rectangle"></div>
        <div class="rectangle"></div>
    </div>

＆＃13;

Answer 3

.container {
  display: flex;
  width: max-content;
  flex-wrap: wrap;
  flex-direction: row;
  margin-left: auto;
  margin-right: auto;
}

@media only screen and (min-width: 294px) { .container {
  width: 290px;
}}
@media only screen and (min-width: 584px) { .container {
    width: 580px;
}}
@media only screen and (min-width: 874px) { .container {
    width: 870px;
}}
@media only screen and (min-width: 1164px) { .container {
    width: 1160px;
}}

.rectangle {
  width: 286px;
  height: 180px;
  margin-right: 2px;
  margin-left: 2px;
  margin-bottom: 24px;
  background: #aeaeae;
}

<div class="container">
  <div class="rectangle"></div>
  <div class="rectangle"></div>
  <div class="rectangle"></div>
  <div class="rectangle"></div>
  <div class="rectangle"></div>
</div>

Answer 4

是的，您可以通过各种方式实现它，而无需定位媒体查询。这是一个例子：让我们将.rectangle包裹在另一个div

中

<div class="container">
  <div>
    <div class="rectangle"></div>
  </div>
    <div>
    <div class="rectangle"></div>
  </div>
    <div>
    <div class="rectangle"></div>
  </div>
    <div>
    <div class="rectangle"></div>
  </div>
    <div>
    <div class="rectangle"></div>
  </div>
</div>

为每个持有div的矩形声明25％的宽度：

*{
  box-sizing: border-box;
}
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.container > div{
 width: 25%; float: left; padding-right: 5px; margin-bottom: 24px; height: 180px;  
}
.container > div::nth-child(4){
  padding-right: 0;
}
.rectangle{background: green; height: 180px; }

以下是codepen

居中页面中的元素列表

4 个答案: