如何对齐弹性框中的项目？ [复制]

Posted 2023-03-05

【中文标题】如何对齐弹性框中的项目？ [复制]

【英文标题】：How to align items in the flexbox? [duplicate]

【发布时间】：2017-04-24 01:37:35

【问题描述】：

我希望将具有固定宽度和高度的子元素一个接一个地放置在 flexbox 中，它们之间有一个小的缩进，并且父元素要居中，但不居中它的子元素。

我所有试图强制父元素居中并停止将其子元素居中的尝试都失败了，其中包括：

align-self: center;
margin: 0 auto;
justify-content: space-between;

这里是link 预览。我所需要的只是要居中的父元素。

justify-content: center; 对齐父 div，但我不希望最后一行（如果它没有完全填充元素）居中。

那我该怎么做呢？提前谢谢你。

【参考方案1】：

在父 .grid-view 上使用 justify-content: center;。

看看下面这个sn-p：

.grid-view 
    display: flex;
    padding: 0px;
    margin: 0px;
    align-self: center;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;


.grid-view .item 
    flex-shrink: 1;
    margin: 5px;
    border: 1px solid #333;
    align-self: flex-start;


.grid-view .item .item-cover 
    width: 200px;
    border: 3px solid #006699;
    border-radius: 3px;

<div class="grid-view"> 
    <div class="item">
        <img class="item-cover"  src="https://pbs.twimg.com/profile_images/660946436801101824/niM7azZS.jpg" />
        <h2 class="item-title">Title</h2>
        <p class="item-description">item description</p>
    </div>
    <div class="item">
        <img class="item-cover"  src="https://pbs.twimg.com/profile_images/660946436801101824/niM7azZS.jpg" />
        <h2 class="item-title">Title</h2>
        <p class="item-description">item description</p>
    </div>
    <div class="item">
        <img class="item-cover"  src="https://pbs.twimg.com/profile_images/660946436801101824/niM7azZS.jpg" />
        <h2 class="item-title">Title</h2>
        <p class="item-description">item description</p>
    </div>
    <div class="item">
        <img class="item-cover"  src="https://pbs.twimg.com/profile_images/660946436801101824/niM7azZS.jpg" />
        <h2 class="item-title">Title</h2>
        <p class="item-description">item description</p>
    </div>
    <div class="item">
        <img class="item-cover"  src="https://pbs.twimg.com/profile_images/660946436801101824/niM7azZS.jpg" />
        <h2 class="item-title">Title</h2>
        <p class="item-description">item description</p>
    </div>
    <div class="item">
        <img class="item-cover"  src="https://pbs.twimg.com/profile_images/660946436801101824/niM7azZS.jpg" />
        <h2 class="item-title">Title</h2>
        <p class="item-description">item description</p>
    </div>
    <div class="item">
        <img class="item-cover"  src="https://pbs.twimg.com/profile_images/660946436801101824/niM7azZS.jpg" />
        <h2 class="item-title">Title</h2>
        <p class="item-description">item description</p>
    </div>
    <div class="item">
        <img class="item-cover"  src="https://pbs.twimg.com/profile_images/660946436801101824/niM7azZS.jpg" />
        <h2 class="item-title">Title</h2>
        <p class="item-description">item description</p>
    </div>
</div>

希望这会有所帮助！

【讨论】：

但是最后一个元素居中。我希望他们在左边。

@po4teda 我不认为最后一行完全有可能留在左边，除非 CSS 有办法检测换行（它没有）...

@kukkuz，我已经更新了我的问题。有可能吗？

@po4teda 我明白你的意思。为此，您需要知道要包装的物品，但我认为没有办法跟踪它。这也是 kukkuz 想要告诉你的。

IMO 你需要 JS 来检测包裹...