将 Flexbox 'ul' 容器内的所有 'li' 图像设置为相同的固定大小

Question

我在每个 li 标签中都有一张图片，每张图片下方都有一些文字。父 ul 和子 li 具有如下 flexbox 属性。

父 Ul：

{ display: flex; flex-wrap: row wrap; height: auto;}

李子:

ul.uploaded-pics li { flex: 0 1 auto; margin: 4px; align-self: center; vertical-align: middle; border-radius: 2px; }
ul.uploaded-pics label img { align-self: center; width: 100%; transition-duration: 0.2s; transform-origin: 50% 50%;}

我已使用 align-self: center; 使图像与父级 ul 的中心对齐。但是，图像大小不一致，并且会根据每个标签中的文本量而变化。在标签文本流入第 2 行和第 3 行的地方，上图会拉伸以填充上面的空白 space。 align-self: flex-start; 和 align-self: flex-end; 也没有帮助，每个 li 的图像大小不同。

无论下面 label 中的文本如何，我如何修复 li 中的图像大小，以便图像彼此对齐并且文本标签也自行对齐？

找到下面的工作代码：

@import url('https://fonts.googleapis.com/css?family=Open+Sans');
ul.uploaded-pics { margin: 0; padding: 1px; border: 1px solid #aaa; border-radius: 4px}
ul.uploaded-pics { list-style-type: none;}
ul.uploaded-pics img { border: 2px;}
ul.uploaded-pics input[type="checkbox"]{ display: none;}
ul.uploaded-pics label { padding: 4px; display: block; position: relative; cursor: pointer; text-align: center; color: blue;}
ul.uploaded-pics label img { align-self: center; width: 100%; transition-duration: 0.2s; transform-origin: 50% 50%;}
ul.uploaded-pics { display: flex; flex-wrap: row wrap; height: auto;}
ul.uploaded-pics li { flex: 0 1 auto; margin: 4px; align-self: center; vertical-align: middle; border-radius: 2px; }
.pull-right .btn { margin-left: 5px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div id=Destination>Select the brands:
    <ul class="uploaded-pics">
        <li id=SubBrands>
            <input class="SubBrandCheckBox" name="Brand1" type="checkbox"/>
            <label><img src="https://pbs.twimg.com/media/DPt4SyVUEAIX4GZ.jpg" />Brand1</label>
        </li>
        <li id=SubBrands>
            <input class="SubBrandCheckBox" name="Brand2" type="checkbox"/>
            <label><img src="https://pbs.twimg.com/media/DPt4SybU8AAv8dm.jpg" />Brand2</label>
        </li>
        <li id=SubBrands>
            <input class="SubBrandCheckBox" name="Brand3" type="checkbox"/>
            <label><img src="https://pbs.twimg.com/media/DPt4SyVUEAIX4GZ.jpg" />XXXX XXXX XXXX XXXX XXXX Brand3</label>
        </li>
        <li id=SubBrands>
            <input class="SubBrandCheckBox" name="Brand4" type="checkbox"/>
            <label><img src="https://pbs.twimg.com/media/DPt4SybU8AAv8dm.jpg" />XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX Brand4</label>
        </li>
        <li id=SubBrands>
            <input class="SubBrandCheckBox" name="Brand5" type="checkbox"/>
            <label><img src="https://pbs.twimg.com/media/DPt4SyVUEAIX4GZ.jpg" />Brand5</label>
        </li>
    </ul>
</div>

Answer 1

您需要在 ul.uploaded-pics li 中添加 align-self 和 flex-basis，如下所示：

ul.uploaded-pics li {
  align-self: flex-start;
  flex-basis: 100%;
}

然后每一列的大小都相同，并且图像适合它。您可以删除 li 中的 flex 属性和 ul 中的 flex-grow 属性，因为它们是不必要的。

将 Flexbox 'ul' 容器内的所有 'li' 图像设置为相同的固定大小

Get all 'li' images inside Flexbox 'ul' container to same, fixed size

alignment

vertical-alignment

flexbox