Question

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

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

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

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

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

那我怎么能这样做？提前谢谢。

Answer 1

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

请看下面的这个代码段：

＆＃13;

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

＆＃13;

<div class="grid-view"> 
    <div class="item">
        <img class="item-cover" alt="attēls" 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" alt="attēls" 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" alt="attēls" 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" alt="attēls" 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" alt="attēls" 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" alt="attēls" 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" alt="attēls" 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" alt="attēls" 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>

＆＃13;

希望这有帮助！

如何对齐flexbox中的项目？

1 个答案: