与图片和文本在同一容器内对齐

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.

我正在制作一个灵活的员工身份证布局。员工的照片会向左，员工的信息(姓名、员工身份、部门等)会以自上而下的列表格式显示在图片的右边。

I need to do this using flexbox.

我需要用flexbox做这个。

Here is a link to my JSFiddle with what I have done so far:

这里有一个链接到我的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

Any and all help would be much appreciated. Thanks, Jason

非常感谢您的帮助。谢谢你,杰森

2 个解决方案

#1

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;
}

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.

如果在img之后立即添加多个，它们将继续以行方式显示(如浮点数)。这也许不是你想要的。一种选择可能是将每个项目设置为一个固定的宽度——但这打破了flexbox的精神。

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>

Here's a fork of your fiddle where I did this. http://jsfiddle.net/Paceaux/7fcqkb50/1/

这是你的一把叉子，是我做的。http://jsfiddle.net/Paceaux/7fcqkb50/1/

#2

Just wrap your info in a container set to display: inline-block:

只需将您的信息封装在一个容器中，该容器将显示:inline-block:

HTML

HTML

<div class="flex-item">
    <img src="http://placehold.it/100x100"/>
    <div class="info-container">
       <p>Field 1</p>
       <p>Field 2</p>
       <p>Field 3</p>
    </div>
</div>

CSS

CSS

.info-container{
   display: inline-block;
   vertical-align: top;
   padding: 0 0 0 5px;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}

.info-container p{
    padding: 0;
    margin: 0 0 10px;
}

FIDDLE

小提琴

#1