フレックスアイテムの画像が同じ幅で折れて表示される

Question

赤い枠線はフレックスアイテムの周りにあります。あなたは垂直方向の配置が正常に動作して見ることができるように

width: 100% 
    display: flex 
    flex-direction: row 
    align-items: flex-end 

：彼らは

flex-grow: 1 

これらの項目は、フレックスコンテナに含まれています。

イメージを置くと、画像の幅によってフレックスアイテムが大きくなるか小さくなる。イメージの幅はフレックスアイテムの幅よりも優先されます。私が言いたいのは、次のようなものです：

最初にフレックスアイテムをすべて同じサイズにしてから、含まれているイメージの大きさをコンテナのサイズ（フレックスアイテム）に合わせます。私は画像上でwidth: 100%とwidth: autoを試しました。助けてくれなかった。

この画像は、等間隔のフレックスアイテム（赤い枠線）を示しています。ボックスの幅を変えずに画像をこれらのボックスに収めたいと思っています。フレックスアイテムを表のセルに置き換えた場合の動作です。

このフィドルは3つのに等しいボックスを示していますhttps://jsfiddle.net/justinwyllie/zdrd89gu/

.flex-container { 
 
    display: flex; 
 
    flex-direction: row; 
 
    align-items: flex-end; 
 
} 
 

 
.flex-boxes { 
 
    flex-grow: 1; 
 
    border: 2px solid red; 
 
}

<div class="flex-container"> 
 
    <div class="flex-boxes">A</div> 
 
    <div class="flex-boxes">B</div> 
 
    <div class="flex-boxes">C</div> 
 
</div>

この1つは中央屈曲アイテムの画像を示しています。平等な箱を完全に台無しにしてしまった。質問は、猫を真ん中のボックスに合わせるためには何をする必要があるのですか？ （幅に合わせる、高さについては気にしない）。

https://jsfiddle.net/justinwyllie/zdrd89gu/1/

.flex-container { 
 
    display: flex; 
 
    flex-direction: row; 
 
    align-items: flex-end; 
 
} 
 

 
.flex-boxes { 
 
    flex-grow: 1; 
 
    border: 2px solid red; 
 
} 
 

 
.cat { 
 
    width: auto; 
 
}

<div class="flex-container"> 
 
    <div class="flex-boxes">A</div> 
 
    <div class="flex-boxes"> 
 
    <img class="cat" src="http://www.publicdomainpictures.net/pictures/30000/velka/annoyed-cat.jpg" /> 
 
    </div> 
 
    <div class="flex-boxes">C</div> 
 
</div>

Answer 1

flex-growプロパティが消費するどのくらい利用できるコンテナ内のスペースフレックスアイテムを伝えます。

flex-grow: 1は空のアイテムを均等に配布するように指示するので、空のアイテムはすべて同じ幅です。

上記のように、flex-growはコンテナ内の空き容量に基づいており、コンテンツはスペースを消費するため、これらのアイテムに入れたコンテンツはflex-growに影響します。

アイテムの幅を一定に保つには、flex-basisを使用します。

ので、代わりの：

flex-grow: 1; 

試してください：あなたは、行ごとに5つの項目を望んでいた場合

flex: 0 0 20%; /* don't grow, don't shrink, fixed width at 20% */ 

20％は、単なる一例です。

jsFiddle

.flex-container { 
 
    display: flex; 
 
    flex-direction: row; 
 
    align-items: flex-end; 
 
} 
 
.flex-boxes { 
 
    /* flex-grow: 1;  <-- REMOVE */ 
 
    flex: 0 0 33.33%;  /* NEW */ 
 
    border: 2px solid red; 
 
    /* box-sizing: border-box; you may need to add this property if 
 
          you enable wrapping */ 
 
} 
 
.cat { 
 
    width: auto; 
 
    /* vertical-align: bottom; add this property if you want to remove 
 
           the small gap of whitespace underneath images 
 
           https://stackoverflow.com/a/31445364/3597276 */ 
 
}

<div class="flex-container"> 
 
    <div class="flex-boxes">A</div> 
 
    <div class="flex-boxes"> 
 
    <img class="cat" src="http://www.publicdomainpictures.net/pictures/30000/velka/annoyed-cat.jpg" /> 
 
    </div> 
 
    <div class="flex-boxes">C</div> 
 
</div>

はこちら詳細はこちら：

• flex-grow not sizing flex items as expected

はここにあなたの改訂コードです