时间戳

首页 > 解决方案 > 将 Flexbox 'ul' 容器内的所有 'li' 图像设置为相同的固定大小

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

问题描述

我在每个li标签中有一张图片，每张图片下方都有一些文字。parentul和 childli具有如下的 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;让图像与 parent 的中心对齐ul。但是，图像大小并不一致，并且会根据每个相应标签中的文本量而变化。在标签文本流入第 2 或第 3 行的地方，上面的图像会拉伸以填充上面的空白区域。align-self: flex-start;并且align-self: flex-end;也无济于事，并且每个图像大小都不同li。

li无论下面的文本如何，如何修复图像大小label，以便图像相互对齐并且文本标签也对齐？

找到下面的工作代码：

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

标签： flexboxalignmentvertical-alignment

解决方案

您需要添加和align-self如下：flex-basisul.uploaded-pics li

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

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

推荐阅读