Flexbox-Ausrichtung mit Bildern und text in den selben container

Ich mache eine flexbox-Mitarbeiter-ID-Karten-layout. Die Mitarbeiter-das Bild wird nach Links gehen und die Mitarbeiter-info (name, Mitarbeiter-id, Abteilung, etc) gehen an die rechts im Bild in Form einer Liste von oben nach unten.

Muss ich dies tun, mit flexbox.

Hier ist ein link zu mein JSFiddle mit dem, was ich bisher getan habe:

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

Jegliche Hilfe würde sehr geschätzt werden. Danke, Jason

"Links zu jsfiddle.net beizufügen ist code" bedeutet nicht, sollten Sie konvertieren Sie den link in code. Es heißt, du muss den code in deiner Frage. Und was ist das problem mit dem aktuellen code?
Danke. Ich habe es behoben.

InformationsquelleAutor Jason Keith McCoy | 2015-01-01

  1. 10

    Die unaufdringliche Herangehensweise, die ich gefunden habe, war Folgendes hinzufügen:

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

    Wenn Sie hinzufügen, mehrere <span> sofort nach dem img, werden Sie weiterhin angezeigt, in der Zeile Mode (wie float). Dies ist möglicherweise nicht das, was Sie wollen, though. Eine option könnte sein, legen Sie jedes Element auf eine Feste Breite - aber durchbricht der Geist der flexbox.

    Aber wenn Sie ändern Sie Ihre text-wrapper enthalten eine einzelne <div> ich denke, du wirst in Ordnung sein. Die <div> wird die Anzeige als block-level-element, bis Sie sich anders entscheiden. 

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

    Hier eine Gabel von Ihrem fiddle, wo ich das Tat. http://jsfiddle.net/Paceaux/7fcqkb50/1/

    InformationsquelleAutor paceaux

  2. 2

    Nur wickeln Sie Ihre Informationen in einen container gesetzt, um 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;
}

    GEIGE

    Danke. Das wird funktionieren 🙂
    Kein problem. Froh zu helfen. Können Sie bitte überprüfen Sie diese aus, wie aufgelöst, wenn Sie können?

    InformationsquelleAutor jmore009

Schreibe einen Kommentar