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
But I need everything to be even, but at the same time it also remains in the center, without extra spaces, like this
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 >
<div >
<span>Australia <img src="https://i.imgur.com/Ad3jzMI.jpg"></span>
</div>
<div >
<span>Italy <img src="https://i.imgur.com/Ad3jzMI.jpg"></span>
</div>
<div >
<span>Germany <img src="https://i.imgur.com/Ad3jzMI.jpg"></span>
</div>
</div>CodePudding user response：
Add a wrapper (i.e., <div >), 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 >
<div >
<div >
<span>Australia <img src="https://i.imgur.com/Ad3jzMI.jpg"></span>
</div>
<div >
<span>Italy <img src="https://i.imgur.com/Ad3jzMI.jpg"></span>
</div>
<div >
<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 >
<div >
<div >
<span>Australia <img src="https://i.imgur.com/Ad3jzMI.jpg"></span>
</div>
<div >
<span>Italy <img src="https://i.imgur.com/Ad3jzMI.jpg"></span>
</div>
<div >
<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 >
<div >
<div >
<span>Australia <img src="https://i.imgur.com/Ad3jzMI.jpg"></span>
</div>
<div >
<span>Italy <img src="https://i.imgur.com/Ad3jzMI.jpg"></span>
</div>
<div >
<span>Germany <img src="https://i.imgur.com/Ad3jzMI.jpg"></span>
</div>
</div>
</div>CodePudding user response：
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 >
<div >
<span>Australia</span><img src="https://i.imgur.com/Ad3jzMI.jpg">
</div>
<div >
<span>Italy</span><img src="https://i.imgur.com/Ad3jzMI.jpg">
</div>
<div >
<span>Germany</span><img src="https://i.imgur.com/Ad3jzMI.jpg">
</div>
</div>CodePudding user response：
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 >
<div >
<span ><span class='country'>Australia</span> <img src="https://i.imgur.com/Ad3jzMI.jpg"></span>
</div>
<div >
<span ><span class='country'>Italy</span> <img src="https://i.imgur.com/Ad3jzMI.jpg"></span>
</div>
<div >
<span ><span class='country'>Germany</span> <img src="https://i.imgur.com/Ad3jzMI.jpg"></span>
</div>
</div>CodePudding user response：
.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 >
<div >
<span>Australia</span> <img src="https://i.imgur.com/Ad3jzMI.jpg">
</div>
<div >
<span>Italy</span> <img src="https://i.imgur.com/Ad3jzMI.jpg">
</div>
<div >
<span>Germany</span> <img src="https://i.imgur.com/Ad3jzMI.jpg">
</div>
</div>