我正在制作 Flexbox 员工 ID 卡布局。员工的照片将显示在左侧，员工信息（姓名、员工 ID、部门等）将以列表格式从上到下显示在图像的右侧。
我需要使用弹性盒来做到这一点。
这是我的 JSFiddle 的链接，其中包含我迄今为止所做的事情：
http://jsfiddle.net/Hopped_Up_Designs/3teLbqqf http://jsfiddle.net/Hopped_Up_Designs/3teLbqqf
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-align-items: center;
align-items: center;
flex-wrap: wrap;
min-width: 320px;
max-width: 1220px;
}
.flex-item {
height: 120px;
width: 300px;
background-color: #e46119;
border: 1px solid #626262;
margin: 3px;
padding: 10px 0 0 10px;
}
span {
padding-left: 5px;
}
<div class="flex-container">
<div class="flex-item"><img src="http://placehold.it/100x100">
<span>Text fields will go here</span>
</div>
<div class="flex-item"><img src="http://placehold.it/100x100">
<span>Text fields will go here</span>
</div>
<div class="flex-item"><img src="http://placehold.it/100x100">
<span>Text fields will go here</span>
</div>
<div class="flex-item"><img src="http://placehold.it/100x100">
<span>Text fields will go here</span>
</div>
<div class="flex-item"><img src="http://placehold.it/100x100">
<span>Text fields will go here</span>
</div>
<div class="flex-item"><img src="http://placehold.it/100x100">
<span>Text fields will go here</span>
</div>
<div class="flex-item"><img src="http://placehold.it/100x100">
<span>Text fields will go here</span>
</div>
<div class="flex-item"><img src="http://placehold.it/100x100">
<span>Text fields will go here</span>
</div>
<div class="flex-item"><img src="http://placehold.it/100x100">
<span>Text fields will go here</span>
</div>
</div>
任何和所有的帮助将不胜感激。谢谢，杰森
我发现最不引人注目的方法是添加以下内容：
.flex-item {
display:flex;
align-items: center;
}
.flex-item img{
flex-grow:0;
flex-shrink:0;
}
如果添加多个<span>在 img 之后，它们将继续以行方式显示（如浮动）。但这可能不是您想要的。一种选择是将每个项目设置为固定宽度 - 但这破坏了 Flexbox 的精神。
但是如果您修改文本包装器以包含单个<div>，我想你会没事的。这<div>将显示为块级元素，直到您选择其他方式。
<div class="flex-item">
<img src="http://placehold.it/100x100">
<div>
<ul>
<li>Text fields will go here</li>
<li>and here</li>
</ul>
</div>
</div>
这是你的小提琴叉子，我就是在那里做的。http://jsfiddle.net/Paceaux/7fcqkb50/1/ http://jsfiddle.net/Paceaux/7fcqkb50/1/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
