flex flex mulitlineのテキストボックスを表示

Question

これは数日間、ディスプレイのフレックスについての情報を読んでいましたが、まだ解決できない問題があります。私はすべてを取得するために、n番目の-の型（3N + 2）を使用し、これを行うために、私は3箱を持って、彼らは％の幅とお互いを分離するいくつかのピクセルを持って、このような何か

[[first box] [second box] [third box]] 

ので、中央要素および各ボックスは、2つのdiv、（左）画像及びテキストが、しかし、テキストは、少なくとも2つの行を有する場合、ボックスは

[[first box] [second box] 
          [third box]] 

をmissaligned取得両側に

をPX分離をaddind

それは良くありません。私はディスプレイを削除するのであれば、スタイルで遊ん：曲がり、ボックスを整列させたが、テキストは今途中-.-

.general-cont { 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 

 
.each-cont { 
 
    width: 32.5%; 
 
    display: inline-block; 
 
    margin-top: 6px; 
 
} 
 

 
.each-cont:nth-of-type(3n+2) { 
 
    margin-left: 10px; 
 
    margin-right: 10px; 
 
} 
 

 
.img-cont { 
 
    float: left; 
 
    height: 48px; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.text-cont { 
 
    height: 48px; 
 
    overflow: hidden; 
 
    align-items: center; 
 
    text-align: left; 
 
    display: flex; 
 
}

<div class="general-cont"> 
 
    <div class="each-cont"> 
 
    <a> 
 
     <div class="img-cont"> 
 
     123 
 
     </div> 
 
     <div class="text-cont"> 
 
     456 
 
     </div> 
 
    </a> 
 
    </div> 
 

 
    <div class="each-cont"> 
 
    <a> 
 
     <div class="img-cont"> 
 
     ABC 
 
     </div> 
 
     <div class="text-cont"> 
 
     DEF 
 
     </div> 
 
    </a> 
 
    </div> 
 

 
    <div class="each-cont"> 
 
    <a> 
 
     <div class="img-cont"> 
 
     QWE 
 
     </div> 
 
     <div class="text-cont"> 
 
     ASD 
 
     </div> 
 
    </a> 
 
    </div> 
 

 
</div>

Answer 1

に垂直に配向されていないあなたは、コードしていますすべてのビットです。フレックスを使用しているときは、幅、浮動小数点などを組み合わせてはいけません。ここにあなたのコードを使用した簡単な例です：

.general-cont { 
    display: flex; 
    flex-direction: row; 
    flex-flow: center; 
    align-items: stretch; 
} 

.each-cont { 
    background: #eee; 
    margin: 0 10px; 
    padding: 10px; 
} 


.img-cont { 
    display: block; 
} 

http://codepen.io/paulcredmond/pen/rrRvkk

私はCSSのトリックのガイドを読んで助言する：-https：//css-tricks.com/ https://css-tricks.com/snippets/css/a-guide-to-flexbox/