web-dev-qa-db-fra.com

Alignement de la Flexbox avec les images et le texte dans le même conteneur

Je crée une carte d'identification d'employé flexbox. La photo de l'employé ira à gauche et les informations de l'employé (nom, identifiant de l'employé, département, etc.) iront à droite de l'image dans un format de liste de haut en bas.

J'ai besoin de faire cela en utilisant flexbox.

Voici un lien vers mon JSFiddle avec ce que j'ai fait jusqu'à présent:

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

Toute aide serait très appréciée. Merci Jason

htmlcsslayoutflexbox
6
Jason Keith McCoy

L’approche la plus discrète que j’ai trouvée consistait à ajouter ceci:

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

Si vous ajoutez plusieurs <span> immédiatement après img, ils continueront de s'afficher en mode ligne (comme un float). Cela peut ne pas être ce que vous voulez, cependant. Une option pourrait consister à définir une largeur fixe pour chaque élément, mais cela casse l'esprit de la flexbox.

Mais si vous modifiez votre enveloppe de texte pour qu'elle contienne un seul <div>, je pense que tout ira bien. Le <div> s'affichera en tant qu'élément de niveau bloc jusqu'à votre choix. 

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

Voici une fourchette de votre violon où j'ai fait cela. http://jsfiddle.net/Paceaux/7fcqkb50/1/

10
paceaux

Emballez simplement vos informations dans un conteneur défini sur 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

2
jmore009