align center with all padding - html

Question

I need to align the elements so that everyone in the block stands exactly without extra spaces
I do it with justify-content: center, elements are centered but look like this
enter image description here
But I need everything to be even, but at the same time it also remains in the center, without extra spaces, like this
enter image description here
important note, when the screen width is larger, the elements should not be in a column but in a row, this is now done, I deliberately reduced the width so that they do not fit
.flex {
display: flex;
justify-content: center;
margin-bottom: 24px;
flex-wrap: wrap;
width: 200px;
}
.item {
position: relative;
padding-left: 28px;
display: flex;
}
.item:not(:last-child) {
margin-right: 16px;
}
.item svg {
position: absolute;
top: 5px;
left: 0;
}
.item span {
display: block;
font-size: 16px;
line-height: 1.5;
max-width: 200px;
}
.item img {
width: 30px;
margin-left: 7px;
display: inline-block;
}
<div class="flex">
<div class="item">
<span>Australia <img src="https://i.imgur.com/Ad3jzMI.jpg"></span>
</div>
<div class="item">
<span>Italy <img src="https://i.imgur.com/Ad3jzMI.jpg"></span>
</div>
<div class="item">
<span>Germany <img src="https://i.imgur.com/Ad3jzMI.jpg"></span>
</div>
</div>

Answer 1

Add a wrapper (i.e., <div class="wrapper">), everything else can stay the same. The trick is that now the wrapper is centered.
See the snippet below.
.flex {
display: flex;
justify-content: center;
margin-bottom: 24px;
flex-wrap: wrap;
width: 200px;
border: 1px solid red;
}
.item {
position: relative;
padding-left: 28px;
display: flex;
}
.item:not(:last-child) {
margin-right: 16px;
}
.item svg {
position: absolute;
top: 5px;
left: 0;
}
.item span {
display: block;
font-size: 16px;
line-height: 1.5;
max-width: 200px;
}
.item img {
width: 30px;
margin-left: 7px;
display: inline-block;
}
<div class="flex">
<div class="wrapper">
<div class="item">
<span>Australia <img src="https://i.imgur.com/Ad3jzMI.jpg"></span>
</div>
<div class="item">
<span>Italy <img src="https://i.imgur.com/Ad3jzMI.jpg"></span>
</div>
<div class="item">
<span>Germany <img src="https://i.imgur.com/Ad3jzMI.jpg"></span>
</div>
</div>
</div>
EDIT 1
.flex {
display: flex;
justify-content: center;
margin-bottom: 24px;
flex-wrap: wrap;
border: 1px solid red;
}
.item {
padding-left: 28px;
display: inline-block;
}
.item:not(:last-child) {
margin-right: 16px;
}
.item svg {
position: absolute;
top: 5px;
left: 0;
}
.item span {
display: block;
font-size: 16px;
line-height: 1.5;
max-width: 200px;
}
.item img {
width: 30px;
margin-left: 7px;
}
<div class="flex">
<div class="wrapper">
<div class="item">
<span>Australia <img src="https://i.imgur.com/Ad3jzMI.jpg"></span>
</div>
<div class="item">
<span>Italy <img src="https://i.imgur.com/Ad3jzMI.jpg"></span>
</div>
<div class="item">
<span>Germany <img src="https://i.imgur.com/Ad3jzMI.jpg"></span>
</div>
</div>
</div>
EDIT 2
.flex {
display: flex;
justify-content: center;
margin-bottom: 24px;
flex-wrap: wrap;
border: 1px solid red;
}
.item {
padding-left: 28px;
display: inline-block;
}
.item:not(:last-child) {
margin-right: 16px;
}
.item svg {
position: absolute;
top: 5px;
left: 0;
}
.item span {
display: block;
font-size: 16px;
line-height: 1.5;
max-width: 200px;
}
.item img {
width: 30px;
margin-left: 7px;
}
#media screen and (max-width: 576px) {
.item {
display: flex;
}
}
<div class="flex">
<div class="wrapper">
<div class="item">
<span>Australia <img src="https://i.imgur.com/Ad3jzMI.jpg"></span>
</div>
<div class="item">
<span>Italy <img src="https://i.imgur.com/Ad3jzMI.jpg"></span>
</div>
<div class="item">
<span>Germany <img src="https://i.imgur.com/Ad3jzMI.jpg"></span>
</div>
</div>
</div>

Answer 2

This is because you are adding img after the text of span, not after span itself.
.flex {
display: flex;
justify-content: center;
margin-bottom: 24px;
flex-wrap: wrap;
width: 200px;
}
.item {
position: relative;
display: flex;
}
.item svg {
position: absolute;
top: 5px;
left: 0;
}
.item span {
display: block;
font-size: 16px;
line-height: 1.5;
min-width: 100px;
max-width: 200px;
}
.item img {
width: 30px;
display: inline-block;
}
<div class="flex">
<div class="item">
<span>Australia</span><img src="https://i.imgur.com/Ad3jzMI.jpg">
</div>
<div class="item">
<span>Italy</span><img src="https://i.imgur.com/Ad3jzMI.jpg">
</div>
<div class="item">
<span>Germany</span><img src="https://i.imgur.com/Ad3jzMI.jpg">
</div>
</div>

Answer 3

Do you mean something like this? Hope this answer helps.
You can find more information on flexbox layout here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.flex {
margin-bottom: 24px;
flex-wrap: wrap;
width: 200px;
}
.item {
position: relative;
padding-left: 28px;
}
.item .wrapper{
font-size: 16px;
line-height: 1.5;
max-width: 200px;
display: flex;
align-items: center;
text-align: left;
}
.item img {
width: 30px;
margin-left: 7px;
display: inline-block;
}
<div class="flex">
<div class="item">
<span class="wrapper"><span class='country'>Australia</span> <img src="https://i.imgur.com/Ad3jzMI.jpg"></span>
</div>
<div class="item">
<span class="wrapper"><span class='country'>Italy</span> <img src="https://i.imgur.com/Ad3jzMI.jpg"></span>
</div>
<div class="item">
<span class="wrapper"><span class='country'>Germany</span> <img src="https://i.imgur.com/Ad3jzMI.jpg"></span>
</div>
</div>

Answer 4

.flex {
display: flex;
flex-wrap: wrap;
}
.item {
margin: 0 10px 10px 0;
width: 200px;
display: flex;
justify-content: space-between;
}
.item svg {
position: absolute;
top: 5px;
left: 0;
}
.item span {
display: block;
font-size: 16px;
line-height: 1.5;
max-width: 200px;
}
.item img {
width: 30px;
margin-left: 7px;
display: inline-block;
}
<div class="flex">
<div class="item">
<span>Australia</span> <img src="https://i.imgur.com/Ad3jzMI.jpg">
</div>
<div class="item">
<span>Italy</span> <img src="https://i.imgur.com/Ad3jzMI.jpg">
</div>
<div class="item">
<span>Germany</span> <img src="https://i.imgur.com/Ad3jzMI.jpg">
</div>
</div>

Answer 5

<div class="flex">
<div>
<div class="item">
<span>Australia <img src="https://i.imgur.com/Ad3jzMI.jpg"></span>
</div>
<div class="item">
<span>Italy <img src="https://i.imgur.com/Ad3jzMI.jpg"></span>
</div>
<div class="item">
<span>Germany <img src="https://i.imgur.com/Ad3jzMI.jpg"></span>
</div>
</div>
</div>
Add one more child and wrap all child elements. Its will center the inner content, still keep the child elements in same position.