css 使用justify start [duplicate]将flex子级列表水平居中

qnyhuwrf 于 2023-06-07 发布在其他

关注(0)|答案(2)|浏览(136)

此问题已在此处有答案：

Place boxes inside ul in center, but align them left（1个答案）
How to center a flex container but left-align flex items（9个答案）
7天前关闭
我想有一个正方形与justify-start左对齐的列表，但他们整个应该在父div的中心。
因此，与此相反：

我想要这个：

我不想这样

我想有一个应该由容器 Package 的元素列表，项目之间的空间应该是固定的（之间没有正当理由），所有的项目应该集中在父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>

有可能使用网格吗？但怎么做？我试过了，但还是不行。按照我的期望工作

.container-grid {
  width: 80%;
  margin: 0 auto;
  border: 5px solid black;
}
.container-squares-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  border: 5px solid gold;
}
.item-grid {
  width: 150px;
  height: 150px;
  background-color: teal;
  border: 1px solid black;
}

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

谢谢你！

css

来源：https://stackoverflow.com/questions/76370661/center-horizontally-a-list-of-flex-children-with-justify-start

2条答案

按热度按时间

px9o7tmv1#

使用flex：你可以在container-square中将内容从开始调整到中心
即：.container-squares { 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>

赞(0）回复(0）举报 2023-06-07

g52tjvyc2#

我觉得你不能
如果你在父容器上使用display: flex; justify-content: center最后一项跳转到中心
检查代码：

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

赞(0）回复(0）举报 2023-06-07

我来回答

css 使用justify start [duplicate]将flex子级列表水平居中

2条答案

相关问题

热门标签

最新问答