I was trying to figure out how to use justify-content: space-between to explain how much space is permitted for flexbox.
My objects are currently spaced, but there is far too much room between them; I want just a little spacing so they may settle in the middle of a row.
Hopefully the snippet below will make clear what I'm having trouble with.
Please let me know if you need any more clarification. Thanks!
#qwrapper {
display: flex;
height: 100%;
width: 100%;
align-items: center;
justify-content: center;
}
.row {
flex: 0 auto;
height: 100px;
margin: 0;
}
#lighticon {
padding-bottom: 30px;
}
@media (max-width: 800px) {
#qwrapper {
flex-direction: column;
align-items: center;
}
}
@media screen and (max-width: 480px) {
#qwrapper {
flex-wrap: wrap;
}
.row {}
}
@media only screen and (min-width: 760px) {
#qwrapper {
justify-content: space-between;
margin: 10px;
}
#lighticon {
position: relative;
margin-left: 100px;
}
}
<div id="qwrapper">
<h3 id="michelle" class="row">"She always thinks of her clients."
<br>
</h3>
<img src="https://cdn4.iconfinder.com/data/icons/black-icon-social-media/512/099310-feedburner-logo.png" class="row" alt="" id="lighticon" />
<h3 id="jerry" class="row">"Very smart, creative person, problem solver."
<br>
</h3>
</div>