Flexbox與同一容器內的圖像和文本對齊

Question

我正在制作一個flexbox員工ID卡布局。 員工的圖片將顯示在左側，員工的信息（姓名，員工ID，部門等）將以從上到下的列表格式顯示在圖像的右側。

我需要使用flexbox來做到這一點。

這是我到目前為止所做的JSFiddle鏈接：

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> 

任何和所有的幫助將不勝感激。 謝謝你，傑森

Answer 1

我發現最不引人注目的方法是添加：

.flex-item {
    display:flex;
    align-items: center;
}
.flex-item img{
    flex-grow:0;
    flex-shrink:0;
}

如果在img之后立即添加多個<span> ，它們將繼續以行方式顯示（如浮點數）。 但這可能不是你想要的。 一個選項可能是將每個項目設置為固定寬度 - 但這會破壞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/

Answer 2

只需將您的信息包裝在一個容器集中即可display: inline-block ：

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

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

小提琴