フレックスボックスの問題

Question

フレックスボックスに関する質問があります。基本的には、私はカードコンポーネントを作成しています。私は左の画像と右のカードのボディが好きです。私はそれを持っている..一種。

問題は、カードが画像よりも大きいことです。私はカードがイメージの高さに留まることを望みます。

.card-horizontal { 
 
    display: flex; 
 
    flex-direction: row; 
 
    width: 100%; 
 
} 
 

 
.card-horizontal__image { 
 
    width: 100%; 
 
    max-width: 100%; 
 
    background-position: center; 
 
} 
 

 
.card-horizonal__body{ 
 
    display: flex; 
 
    flex-direction: column; 
 
    background: white; 
 
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); 
 
    padding: 15px 20px; 
 
}

<div class='st-grid-12'> 
 
    <div class='card-horizontal'> 
 
    <div class='card-horizontal__imgage'> 
 
     <img alt='' src='https://source.unsplash.com/random/400x400'> 
 
    </div> 
 
    <div class='card-horizonal__body'> 
 
     <h2>This is a title</h2> 
 
     <p class='card__copy'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis velit accusamus non numquam assumenda quaerat, consequatur recusandae facilis inventore dicta, distinctio magni obcaecati vel aliquid, fugit maxime. Voluptas, ullam officiis?</p> 
 
     <div class='btn btn--secondary'>Read More</div> 
 
    </div> 
 
    </div> 
 
</div>

私が見て

Answer 1

まず、あなたのクラスのタイプミスがあった、そして第二に、あなたはあなたのディスプレイの誤用を持っていた：ここ

をFlexは、あなたのCSSは、私はあなたができると確信している今

.card-horizontal { 
    display: flex; 
    flex-direction: row; 
    width: 100%; 
    border: 1px solid red; 
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); 
    } 

    .card-horizontal__imgage { 
    max-width: 100%; 
    background-position: center; 
    display: flex; 
    } 

    .card-horizonal__body { 
    display: flex; 
    flex-direction: column; 
    background: white; 
    padding: 15px 20px; 
    } 

ですなぜ私はその国境をして、影にコメントしたかを伝えてください。彼らは本当にサイズが等しいことを示すために。ここ

は影の心配を緩和する

.card-horizontal { 
 
    display: flex; 
 
    flex-direction: row; 
 
    width: 100%; 
 
    border: 1px solid red; 
 
    } 
 

 
    .card-horizontal__imgage { 
 
    max-width: 100%; 
 
    background-position: center; 
 
    display: flex; 
 
    } 
 

 
    .card-horizonal__body { 
 
    display: flex; 
 
    flex-direction: column; 
 
    background: white; 
 
    /* box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); */ 
 
    padding: 15px 20px; 
 
    }

<div class='st-grid-12'> 
 
    <div class='card-horizontal'> 
 
    <div class='card-horizontal__imgage'> 
 
     <img alt='' src='https://source.unsplash.com/random/400x400'> 
 
    </div> 
 
    <div class='card-horizonal__body'> 
 
     <h2>This is a title</h2> 
 
     <p class='card__copy'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis velit accusamus non numquam assumenda quaerat, consequatur recusandae facilis inventore dicta, distinctio magni obcaecati vel aliquid, fugit maxime. Voluptas, ullam officiis?</p> 
 
     <div class='btn btn--secondary'>Read More</div> 
 
    </div> 
 
    </div> 
 
</div>

EDIT

を動作するコードですが、私はそれがどうあるべきかである、カード全体に影を追加しましたとにかくやった。シャドウを高さとしてカウントすることはできません。影は、たとえば、アウトラインのようなCSSの装飾です。そのように見えても項目にサイズは追加されません....これらの質問のいくつかは、ブラウザの開発ツールを確認することで確認できます。

Answer 2

、カードは画像よりもわずかに大きいだけである：

は、ここに私のコードです。これは、画像がデフォルトで表示されているように、画像の下に余分なスペースがあるためです。

この小さなスペースを削除し、画像の列をカードと同じ高さにするには、image要素をdisplay：blockにします。

.card-horizontal__imgage img { 
    display: block; 
} 

Answer 3

まず、コメントに記載されているように、HTMLではclass='card-horizontal__imgage'コードに誤字があります。

カード全体の高さが画像divの画像が4ピクセル分伸びていることが問題です。カード自体にheightを設定すると、問題が解決します。

あなたのCSSにはbackground-position: center;がありますが、それを適用する要素に背景がない場合は何もしません。この問題を解決するもう一つの方法は、イメージ要素をまったく使用せず、イメージを保持すると考えられるdiv要素の背景イメージとしてイメージを設定することです。

また、右のテキスト領域だけでなく、カード全体にbox-shadowを適用すると、より良い結果が得られます。シャドーは要素の高さの外側に適用されます。

.card-horizontal { 
 
    display: flex; 
 
    width: 100%; 
 
    height:25%; 
 
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); 
 
} 
 

 
.card-horizontal__image { 
 
    width: 100%; 
 
    max-width: 100%; 
 
    background-image:url("https://source.unsplash.com/random/400x400"); 
 
    background-size:cover; 
 
} 
 

 
.card-horizonal__body{ 
 
    background: white; 
 
    padding:15px 20px; 
 
}

<div class='st-grid-12'> 
 
     <div class='card-horizontal'> 
 
      <div class='card-horizontal__image'></div> 
 
      <div class='card-horizonal__body'> 
 
      <h2>This is a title</h2> 
 
      <p class='card__copy'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis velit accusamus non numquam assumenda quaerat, consequatur recusandae facilis inventore dicta, distinctio magni obcaecati vel aliquid, fugit maxime. Voluptas, ullam officiis?</p> 
 
      <div class='btn btn--secondary'>Read More</div> 
 
      </div> 
 
     </div> 
 
     </div>