主页 / 问题 / 705673
Accepted
Fangog
Asked:2020-08-14 09:13:58 +0000 UTC2020-08-14 09:13:58 +0000 UTC

如何在不破坏包装的情况下使块居中？

  • 772

假设有块

.main {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  background: #fff;
}

.box {
  width: 170px;
  height: 130px;
  border-radius: 3px;
  border: dashed 2px rgba(0, 0, 0, 0.1);
  margin: 10px;
}
<div class="main">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

我需要将最后一个块按到左边缘，但同时，块的整个结构应该在中心，即 就像它在那里列出的一样justify-content: center。

你可以设置一个固定的宽度，但问题在于.main橡胶。

您可以在jsfiddle中清楚地看到它。

如果减少或增加显示区域，warp 会起作用，但右侧会有很多可用空间

html

3 个回答

  1. Best Answer

    .main {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, 170px);
  max-width: 890px;
  margin: auto;
  justify-content: center;
}

.box {
  height: 130px;
  border-radius: 3px;
  border: dashed 2px rgba(0, 0, 0, 0.1);
}
    <div class="main">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

    • 5

  2. 作为一种选择

    *,
:before,
:after {
    box-sizing: border-box;
}

* {
    padding: 0;
    margin: 0;
}

.main {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    background: #fff;
}

.box {
    width: 170px;
    height: 130px;
    border-radius: 3px;
    border: dashed 2px rgba(0, 0, 0, 0.1);
    margin: 10px;
}

.box:empty {
    height: 0;
    border: none;    
    margin-top: 0;
    margin-bottom: 0;
}
    <div class="main">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>  
</div>

    • 4

  3. 您可以将块包装在您设置的另一个块中justify-content: flex-start;并通过 更改其宽度，然后设置@media块.mainjustify-content: center;

    • 2

相关问题