0
フレックスボックスのalign-itemsプロパティに従って画像が動かない小さな問題に直面していますが、その理由はわかりません。フレックスボックスアラインメントアイテムが動作しない
私は35％と100％までの高さとしての私の要素の幅を設定したとき、align-items: flex-startを適用したかのように彼らはただ行動します。
問題のある部門は'topi'と呼ばれるものです。私は何が起こっていたかのレイアウトまとめると
（それは少し無関係だが、この質問に役立つかもしれないが）：
私は親divの中に2つの親行をしたいです。上の行には2つのセクションがあり、下の行には3つ以上のセクションの列が必要です。
なぜ画像が動いていないのか分かりません。
私はそれが財産align-items: center/space-aroundを持って、それが画像を含むdivタグで動作するはず'topi'クラスを作るので、無関係だと思ったが、画像は、同様flexboxesにあったdivを作っ意味。
私は、画像がdivと一緒に動くと思っていました。
誰かが私にこのことを教えてもらえますか？
P.S.画像がdivにあるのでtopi divルールは役に立たないので、ちょうどtopiのルールで十分でしょうか？ありがとうございました。
.container {
display: flex;
position: relative;
flex-flow: row wrap;
justify-content: space-around;
align-items: stretch;
height: 95vh;
width: 80%;
margin: 5% auto 8% auto;
background-color: white;
}
.top {
display: flex;
flex-flow: column wrap;
justify-content: flex-start;
align-items: center;
}
.bottom {
display: flex;
flex-flow: column wrap;
justify-content: flex-start;
align-items: flex-start;
}
.bottomi {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: flex-start;
height: 100%;
width: 100%;
background-color: red;
}
.topi {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: space-around;
width: 35%;
height: 100%;
;
background-color: white;
}
.topi div {
display: flex;
width: 100%;
height: auto;
}
.topi2 {
width: 65%;
height: 100%;
;
background-color: yellow;
font-size: 20px;
}
.top,
.bottom {
width: 100%;
background-color: green;
}
.top {
height: 60%;
}
.bottom {
height: 40%;
}
.top {
border: 1px solid green;
}
.bottom {
border: 1px solid pink;
}<div class="container">
<div class="top">
<div class="topi">
<img src="ham.jpg" width="209" height="205" alt="Picture of kid" />
<img src="george.jpg" width="209" height="205" alt="Picture of kid" />
</div>
<div class="topi2">
<p>Sample sample sample Sample sample sample Sample sample sample Sample sample sample Sample sample sample Sample sample sample Sample sample sample Sample sample sample Sample sample sample Sample sample sampleSample sample sample Sample sample sample
Sample sample sample Sample sample sample
</p>
</div>
</div>
<div class="bottom">
<div class="bottomi">
</div>
<div class="bottomi2">
</div>
<div class="bottomi3">
</div>
</div>
</div>