0
フレックスレイアウトの画像の右下にテキストを配置しようとしています。それは動作していないようです。私は非常にフレキシブルで、多くの間違いを犯しています。私は左の列と右の列を持っていて、どちらも2行の6行に接触しています。真ん中には説明文があります。私は数字1から12を各画像の右下隅に重ねるようにします。フレックスアイテムの画像上にテキストを配置できない
HTML：
<div class="flexbox-container">
<div class="flexbox-2col-container">
<div class="column50perc"><img src="img/20171118ng_Akasha L Van-Cartier5 1.JPG" />
<div class="number">1</div>
</div>
<div class="column50perc"><img src="img/20171118ng_Akasha L Van-Cartier5 1.JPG" /></div>
<div class="column50perc"><img src="img/20171118ng_Akasha L Van-Cartier5 1.JPG" /></div>
<div class="column50perc"><img src="img/20171118ng_Akasha L Van-Cartier5 1.JPG" /></div>
<div class="column50perc"><img src="img/20171118ng_Akasha L Van-Cartier5 1.JPG" /></div>
<div class="column50perc"><img src="img/20171118ng_Akasha L Van-Cartier5 1.JPG" /></div>
</div>
<div class="flexbox-1widecol-container">
<div class="middle"><h3>12 people to meet in 2018</h3></div>
</div>
<div class="flexbox-2col-container">
<div class="column50perc"><img src="img/20171118ng_Akasha L Van-Cartier5 1.JPG" /></div>
<div class="column50perc"><img src="img/20171118ng_Akasha L Van-Cartier5 1.JPG" /></div>
<div class="column50perc"><img src="img/20171118ng_Akasha L Van-Cartier5 1.JPG" /></div>
<div class="column50perc"><img src="img/20171118ng_Akasha L Van-Cartier5 1.JPG" /></div>
<div class="column50perc"><img src="img/20171118ng_Akasha L Van-Cartier5 1.JPG" /></div>
<div class="column50perc"><img src="img/20171118ng_Akasha L Van-Cartier5 1.JPG" /></div>
</div>
</div>
CSS：
.flexbox-container {
display:flex;
flex-wrap:wrap;
flex-direction:row;
align-items:stretch;
align-items: flex-start;
justify-content: space-between;
}
.flexbox-2col-container {
flex: 2;
display:flex;
flex-wrap:wrap;
flex-direction:row;
align-items:stretch;
justify-content: space-between;
}
.flexbox-1widecol-container {
flex: 1;
padding: 10px;
}
h3 {
font-family: Roboto, sans-serif;
font-weight: 600;
}
.column50perc {
width: 50%;
padding: 10px 5px 0 5px;
justify-content: space-between;
}
img {
cursor: pointer;
position: relative;
display:block;
}
img:hover {
}
.middle {
}
.middle h3 {
background-color: #404040;
color: white;
}
.number {
position: absolute;
display: inline-block;
bottom: 0;
right: 0;
background-color: black;
color: white;
z-index: 2;
width: 50px;
height: 50px;
}
私が間違ってやっているお聞かせください。