Flexbox 与同一容器内的图像和文本对齐

Posted

技术标签:

【中文标题】Flexbox 与同一容器内的图像和文本对齐【英文标题】:Flexbox alignment with images and text inside same container 【发布时间】:2015-02-28 07:39:09 【问题描述】:

我正在制作一个 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>

任何和所有的帮助将不胜感激。谢谢,杰森

【问题讨论】:

"链接到 jsfiddle.net 必须附有代码" 并不意味着您应该将链接转换为代码。这意味着您必须在问题中包含代码。您当前的代码有什么问题? 谢谢。我已经修好了。 【参考方案1】:

我发现的最不显眼的方法是添加以下内容:

.flex-item 
    display:flex;
    align-items: center;

.flex-item img
    flex-grow:0;
    flex-shrink:0;

如果您在 img 之后立即添加多个 &lt;span&gt;,它们将继续以行方式显示(如浮动)。不过,这可能不是您想要的。一种选择是将每个项目设置为固定宽度——但这破坏了 flexbox 的精神。

但是,如果您修改文本包装以包含单个 &lt;div&gt;,我认为您会没事的。 &lt;div&gt; 将显示为块级元素,直到您选择其他方式。

<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/

【讨论】:

【参考方案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;

FIDDLE

【讨论】:

@JasonKeithMcCoy 没问题。乐意效劳。如果可以的话,您能否将其勾选为已解决?

以上是关于Flexbox 与同一容器内的图像和文本对齐的主要内容,如果未能解决你的问题,请参考以下文章

在 flexbox 中将文本与图像居中

使用 flexbox(无浮动)或其他任何东西将元素包裹在图像周围

尝试使用 flexbox 对齐图像下的文本

在本机反应中,Flexbox中的文本垂直居中对齐

Flexbox对齐项目溢出文本在顶部被切断[重复]

容器部分之外的图像[重复]