Controlling the amount of space in justify-content space-between

0 votes

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>
Jun 28, 2022 in CSS by Edureka
• 13,620 points
4,348 views

1 answer to this question.

0 votes
The justify-content property positions flex items on the line using the available space. With justify-content: space-between, all available space is inserted between the first and last items, pushing them to the container's opposing ends.
answered Jun 28, 2022 by Edureka
• 12,690 points

Related Questions In CSS

0 votes
0 answers

How to adjust the amount of space between two lines at each <br> in CSS?

I have a document like this: This is ...READ MORE

Aug 23, 2022 in CSS by Edureka
• 13,620 points
719 views
0 votes
0 answers

What are good uses of the css `content` property?

Because CSS is for display and not ...READ MORE

Jul 18, 2022 in CSS by Edureka
• 13,620 points
293 views
0 votes
0 answers

What are the implications of using "!important" in CSS?

I've been working on a website for ...READ MORE

Jul 18, 2022 in CSS by Edureka
• 13,620 points
402 views
0 votes
0 answers

highlighting the current page in a list of links using css / html

I am trying to amend a friend's ...READ MORE

Jul 25, 2022 in CSS by Edureka
• 13,620 points
585 views
0 votes
1 answer

Why vh works and % doesn't? (height css)

The height of an element, by default, ...READ MORE

answered Jun 10, 2022 in CSS by Edureka
• 12,690 points
1,755 views
0 votes
0 answers

CSS NoWrap on Text

I have a card with a bunch ...READ MORE

Jul 4, 2022 in CSS by Edureka
• 13,620 points
1,079 views
0 votes
0 answers

CSS - display elements in columns

Is there a way (maybe flex, I ...READ MORE

Jul 8, 2022 in CSS by Edureka
• 13,620 points
309 views
0 votes
1 answer

CSS-only masonry layout

A masonry feature is included in CSS ...READ MORE

answered Aug 8, 2022 in CSS by Tanishqa
• 1,170 points
1,327 views
0 votes
1 answer

when declaring css styles, what is the meaning of .classA.classB (two class names with a dot in the middle and no space)

The first example (space-separated classes) is a ...READ MORE

answered Jun 28, 2022 in CSS by Edureka
• 12,690 points
722 views
0 votes
1 answer

Setting the value of REM for all the properties in CSS

We've covered this in comments, but essentially ...READ MORE

answered Jun 28, 2022 in CSS by Edureka
• 12,690 points
2,008 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP