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 in CSS by Edureka
• 9,760 points
20 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 by Edureka
• 9,540 points

Related Questions In CSS

0 votes
0 answers

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

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

Jul 18 in CSS by Edureka
• 9,760 points
11 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 in CSS by Edureka
• 9,760 points
12 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 in CSS by Edureka
• 9,760 points
7 views
0 votes
1 answer

What is the meaning of "cascading' in CSS??

Cascading simply implies that it may be ...READ MORE

answered 5 days ago in CSS by Tanishqa
• 420 points
12 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 in CSS by Edureka
• 9,540 points
47 views
0 votes
0 answers

CSS NoWrap on Text

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

Jul 4 in CSS by Edureka
• 9,760 points
10 views
0 votes
0 answers

CSS - display elements in columns

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

Jul 8 in CSS by Edureka
• 9,760 points
10 views
0 votes
0 answers

CSS-only masonry layout

I need to implement a masonry layout. ...READ MORE

5 days ago in CSS by Edureka
• 9,760 points
6 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 in CSS by Edureka
• 9,540 points
25 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 in CSS by Edureka
• 9,540 points
26 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP