CSS 保持所有 flexbox 子元素的大小相同 [英] CSS Keep all flexbox children elements the same size

问题描述

我的代码是)

如果您将 flex-grow 设置为 0，您是在告诉项目保持它们的宽度并扩大空白空间.使用 flex-grow: 1 项目将扩大宽度以适应空间.

隐形物品(fiddle)

在具有相同 flex 属性的普通项目之后添加一些不可见的项目.您将获得左对齐的外观.

在此解决方案中，所有可见行中的项目数量将相同，因此请确保添加足够的不可见项目以在更大的屏幕上正常工作.

My code is shown in this JSFiddle:

#container {
    align-content: flex-start;
    background-color: red;
    display: flex;
    flex-flow: row wrap;
    height: 200px;
    justify-content: space-around;
    padding: 10px;
    width: 400px;
}

.child-item {
    background-color: yellow;
    flex-basis: 75px;
    flex-grow: 1;
    height: 20px;
    margin: 10px;
    width: 75px;
}

<div id="container">
    <div class="child-item"></div>
    <div class="child-item"></div>
    <div class="child-item"></div>
    <div class="child-item"></div>
    <div class="child-item"></div>
    <div class="child-item"></div>
</div>

Although, I would like the two items across the bottom to have the same with as the items on the top.

I don't want to float them left and fix their width, this will not work for my arrangement in other resolutions.

解决方案

You have 2 ways of doing this:

flex-grow: 0 (fiddle)

If you set flex-grow to 0 you are telling the items to keep their width and expand the empty space. Using flex-grow: 1 the items will expand the width to fit the space.

invisible items (fiddle)

Add some invisible items after the normal items with the same flex properties. You will get a left aligned look.

In this solution there will be the same number of items in all visible rows so make sure to add enough invisible items to work properly on larger screens.

这篇关于CSS 保持所有 flexbox 子元素的大小相同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！