Flexbox与同一容器内的图像和文本对齐 [英] Flexbox alignment with images and text inside same container
问题描述
我正在制作flexbox员工身份证布局.员工的图片将以从上到下的列表格式显示在图像的左侧,而员工的信息(名称,员工ID,部门等)将显示在图像的右侧.
I am making a flexbox Employee ID card layout. The employee's picture will go to the left and the employee's info (name, employee-id, department, etc) will go to the right of the image in a list format top-to-bottom.
我需要使用flexbox来做到这一点.
I need to do this using flexbox.
这里是我到目前为止所做的与我的JSFiddle的链接:
Here is a link to my JSFiddle with what I have done so far:
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>
任何人和所有帮助将不胜感激.谢谢杰森
Any and all help would be much appreciated. Thanks, Jason
推荐答案
我发现最不引人注目的方法是添加以下内容:
The most unobtrusive approach which I found was to add this:
.flex-item {
display:flex;
align-items: center;
}
.flex-item img{
flex-grow:0;
flex-shrink:0;
}
如果您在img之后立即添加多个<span>
,它们将继续以行方式显示(如浮动).但是,这可能不是您想要的.一种选择是将每个项目设置为固定宽度-但这破坏了flexbox的精神.
If you add multiple <span>
immediately after the img, they'll continue displaying in row fashion (like a float). This may not be the what you want, though. One option could be to set each item to a fixed width - but that breaks the spirit of flexbox.
但是,如果您修改文本包装器以包含单个<div>
,我认为您会好的. <div>
将显示为块级元素,直到您选择其他方式.
But if you modify your text wrapper to contain a single <div>
, I think you'll be fine. The <div>
will display as a block level element until you choose otherwise.
<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/
Here's a fork of your fiddle where I did this. http://jsfiddle.net/Paceaux/7fcqkb50/1/
这篇关于Flexbox与同一容器内的图像和文本对齐的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!