淘先锋技术网

首页 1 2 3 4 5 6 7

将flex子项列表水平居中，并对齐开始[重复]

我想有一个左对齐的方块列表，但它们应该在父div整体居中。

所以代替这个的是:

enter image description here

我想要这个:

enter image description here

我不想这样:enter image description here

我想有一个应该由容器包装的元素列表，项目之间的空间应该是固定的(没有调整之间)，所有的项目应该对父div居中。

flex有这种可能吗？

这是我的代码:

.container {
  width: 80%;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  border: 5px solid black;
}
.container-squares {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: start; 
  border: 5px solid gold;
}
.item {
  width: 150px;
  height: 150px;
  background-color: tomato;
  border: 1px solid black;
}

<div class="container">
  <div class="container-squares">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

使用flex:你可以在容器方块中从开始到中心改变对齐内容

ie:。容器正方形{ justify-content:center；}

.container {
  width: 80%;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  border: 5px solid black;
}
.container-squares {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center; 
  border: 5px solid gold;
}
.item {
  width: 150px;
  height: 150px;
  background-color: tomato;
  border: 1px solid black;
}

<div class="container">
  <div class="container-squares">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

我觉得你不能。

如果使用display:flex；justify-content:在父容器上居中最后一项跳转到中心

检查此代码:

.container {
    padding: 1rem;
    width: 80%;
    border: 1px solid;
    overflow: hidden;
    resize: horizontal;
 }
 .container-squares {
    display: grid;
    grid-template-columns: repeat(auto-fit, 10rem);
    grid-gap: 1rem;
    justify-content: center;
}
.item {
    aspect-ratio: 1;
    background-color: #f4cbcc;
    border: 1px solid black;
}

<div class="container">
    <div class="container-squares">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
        <div class="item">10</div>
        <div class="item">11</div>
        <div class="item">12</div>
        <div class="item">13</div>
    </div>
</div>