web-dev-qa-db-ja.com

Flexbox同じコンテナ内の画像とテキストの配置

flexbox従業員IDカードのレイアウトを作成しています。従業員の写真が左側に表示され、従業員の情報（名前、従業員ID、部門など）が画像の右側に表示されますリスト形式で上から下へ。

フレックスボックスを使用してこれを行う必要があります。

これが私の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>

どんな助けも大歓迎です。ありがとう、ジェイソン

htmlcsslayoutflexbox
13
Jason Keith McCoy

私が見つけた最も控えめなアプローチはこれを追加することでした：

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

複数の<span>をimgの直後に追加すると、それらは（フロートのように）行形式で表示され続けます。しかし、これはあなたが望むものではないかもしれません。 1つのオプションは、各項目を固定幅に設定することですが、これは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/

16
paceaux

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

[〜＃〜]フィドル[〜＃〜]

3
jmore009