我正在制作一个flexBox员工ID卡布局.员工的图片将显示在左侧,员工的信息(姓名,员工ID,部门等)将以从上到下的列表格式显示在图像的右侧.
我需要使用flexBox来做到这一点.
这是我到目前为止所做的JSFiddle链接：
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>FlexBox Example 1</title>
<style>
.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;
}
</style>
</head>
<body>
<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>
</body>
</html>
http://jsfiddle.net/Hopped_Up_Designs/3teLbqqf
任何和所有的帮助将不胜感激.谢谢你,杰森
解决方法
我发现最不引人注目的方法是添加：
.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/
