フレックスボックステキストが一緒に実行されています

Question

アイコン、小さなヘッダー、および説明文を含む小さな「カード」を作ろうとしています。しかし、私のすべてのテキストが右隣の画像に一緒に実行されています

任意の考え/提案を、なぜこれが起こっているのと？

.tool-grid { 
 
    padding: 0 1rem 1rem 0; 
 
    display: flex; 
 
    justify-content: flex-start; 
 
} 
 

 
.tool-grid a { 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex: 0 1 35%; 
 
    border: 1px solid dimgrey; 
 
    border-radius: 3px; 
 
    text-decoration: none; 
 
    color: #000; 
 
} 
 

 
.tool-grid a:hover { 
 
    box-shadow: 3px 3px 5px #888; 
 
    transition: .3s; 
 
} 
 

 
.tool-grid-cell { 
 
    display: flex; 
 
    flex: 0 1 35%; 
 
    padding: 0 10px; 
 
    color: #000; 
 
} 
 

 
.tool-grid-cell img { 
 
    align-self: center; 
 
    max-width: 32px; 
 
    max-height: auto; 
 
}

<div class="tool-grid"> 
 
    <a href="#"> 
 
    <div class="tool-grid-cell"> 
 
     <img src="source"> 
 
     <p>Text</p> 
 
     <p>More text</p> 
 
    </div> 
 
    </a> 
 
</div>

Answer 1

デフォルトdisplay: flex;が水平にあなたが別のdivの中に自分の子要素の両方をラップする必要があり、これを防ぐために、デフォルトでは直接の子要素を整列させるためです。 Flexの動作は、2番目の子レベルを超えて何も拡張しません。

はdivの中にテキストをラップしてみてください。

<div class="tool-grid-cell"> 
    <img src="source"> 
    <div> 
     <p>Text</p> 
     <p>More text</p> 
    </div> 
</div> 

Answer 2

一緒にコンテンツをプッシュするいくつかのことがあります。

1. はすでにできる限りあなたはA-タグにdisplay:flexを必要としませんクラスtool-grid-cellでdivを使用して子を配置します。
2. flex: 0 1 35%;は、aタグとtool-grid-cellの両方に使用します。この結果、aタグの内容は35％の幅しかなくなり、要素をいっしょに押し上げることになります。

また、space-betweenも追加しました。この要素は、コンテナ内にうまく配置され、探している結果を提供します。

.tool-grid { 
 
    padding: 0 1rem 1rem 0; 
 
    display: flex; 
 
    justify-content: flex-start; 
 
} 
 

 
.tool-grid a { 
 
    border: 1px solid dimgrey; 
 
    border-radius: 3px; 
 
    text-decoration: none; 
 
    color: #000; 
 
    width: 35%; 
 
} 
 

 
.tool-grid a:hover { 
 
    box-shadow: 3px 3px 5px #888; 
 
    transition: .3s; 
 
} 
 

 
.tool-grid-cell { 
 
    display: flex; 
 
    padding: 0 10px; 
 
    color: #000; 
 
    justify-content:space-between; 
 
} 
 

 
.tool-grid-cell img { 
 
    align-self: center; 
 
    max-width: 32px; 
 
    max-height: auto; 
 
}

<div class="tool-grid"> 
 
    <a href="#"> 
 
     <div class="tool-grid-cell"> 
 
      <img src="http://via.placeholder.com/50x50"> 
 
      <p>Text</p> 
 
      <p>More text</p> 
 
     </div> 
 
    </a> 
 
</div>