Have image and text as one box - css

Question

So im trying to make a flexbox which displays a countrys flag and the language name next to it. The problem i ran into was that the text and picture are treated individually and end up seperated if they are at the end of the box. Is there a way to make one flag with its language into one box and the same for the others, so that the flag and corresponding language are always together?
This is my code so far:
#size {
width: 105px;
height: 60px;
flex-basis: 10%;
}
.flex-container {
margin: auto;
text-align: center;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
width: 80%;
height: 500px;
background-color: aqua;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: center;
align-content: space-around;
}
<div class="flex-container">
<img src="Flag/BU.png" id="size"><a>България</a>
<img src="Flag/CH.png" id="size"><a>中国人</a>
<img src="Flag/FR.png" id="size"><a>Francaise</a>
<img src="Flag/GER.png" id="size"><a>Deutsch</a>
<img src="Flag/HU.png" id="size"><a>Magyar</a>
<img src="Flag/IN.png" id="size"><a>हिंदी</a>
<img src="Flag/JA.png" id="size"><a>日本</a>
<img src="Flag/SK.png" id="size"><a>한국인</a>
<img src="Flag/SP.png" id="size"><a>Español</a>
<img src="Flag/UK.png" id="size"><a>English</a>
</div>

Answer 1

This is a perfect example to use the grid system instead of flexbox
#size {
width: 105px;
height: 60px;
flex-basis: 10%;
}
.grid-container {
margin: 0 auto;
text-align: center;
display: grid;
width: 80%;
min-height: 500px;
background-color: #f5f5f5;
}
<div class="grid-container">
<img src="Flag/BU.png" id="size"><a>България</a>
<img src="Flag/CH.png" id="size"><a>中国人</a>
<img src="Flag/FR.png" id="size"><a>Francaise</a>
<img src="Flag/GER.png" id="size"><a>Deutsch</a>
<img src="Flag/HU.png" id="size"><a>Magyar</a>
<img src="Flag/IN.png" id="size"><a>हिंदी</a>
<img src="Flag/JA.png" id="size"><a>日本</a>
<img src="Flag/SK.png" id="size"><a>한국인</a>
<img src="Flag/SP.png" id="size"><a>Español</a>
<img src="Flag/UK.png" id="size"><a>English</a>
</div>