how justify content works?

Question

I have two divs containing image and text. Outer container for background and inner container for width. Div class name flex is display flex and set justify content space between which is not working? Why it is not working.

.outer-main-container {
  padding: 3em 0em;
  background-color: #f7f0e8;
}

.inner-short-container {
  width: 80%;
  max-width: 750px;
  margin: 0 auto;
}

.flex {
  display: flex;
  justify-content: space-between;
}

img {
  display: block;
  width: 100%;
}

<div class="outer-main-container">
  <div class="inner-short-container">
    <div class="flex">
      <div class="left-img">
        <img src="#" />
      </div>
      <div class="right-text">
        <h2> Header text will go here</h2>
        <p> You will find delightful art pieces. Photographs, Graphics, Craft, FoodBlogs, Foundation paper piecing and more </p>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
          sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
      </div>
    </div>
  </div>
</div>

Answer 1

You just need to add a flex amount to your flex children. flex: 1, this sets how a flex item will grow or shrink to fit the space available in its flex container. flex is short for flex-grow, flex-shrink and/or flex-basis.

The image I used in the example is 980px X 815px and it is set to 100% width in your CSS. It only fills up the available space alloted in your flex parent -> flex:1 where the text is taking up flex:2, 2 times the parent elements space as the image.

.outer-main-container {
  padding: 3em 0em;
  background-color: #f7f0e8;
}

.inner-short-container {
  width: 80%;
  max-width: 750px;
  margin: 0 auto;
}

.flex {
  display: flex;
  justify-content: space-between;
}

img {
  display: block;
  width: 100%;
}

 /* added this class from your html */
.left-img {
  flex: 1; 
  margin-right: .5rem;
}

 /* added this class from your html */
.right-text {
  flex: 2;
}

<div class="outer-main-container">
  <div class="inner-short-container">
    <div class="flex">
      <div class="left-img flow">
        <img src="https://www.rcsdk8.org/sites/main/files/imagecache/story/main-images/camera_lense_0.jpeg" />
      </div>
      <div class="right-text flow">
        <h2> Header text will go here</h2>
        <p> You will find delightful art pieces. Photographs, Graphics, Craft, FoodBlogs, Foundation paper piecing and more </p>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
          sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
      </div>
    </div>
  </div>
</div>

Answer 2

What you should note is that a block element will always take the entire space available to it. That is why the two section (ie. the image and the right text) are giving you that result.

Basically the justify-content property is working but the image is taking up 100% of space available to it and the other div, since it has only block elements, it takes 100% of space. One easy way would be to just add margin between the boxes; however, I have some other alternatives.

What you could do is try to give your image a width -- within the tag itself rather than setting it to 100%, because this way it will always fill the left div and get closer to the right div. You could also use flex: 1 on the two div to ensure they share space correctly.

CSS:

.outer-main-container {
  padding: 3em 0em;
  background-color: #f7f0e8;
}

.inner-short-container {
  width: 80%;
  max-width: 750px;
  margin: 0 auto;
}

.flex {
  display: flex;
  justify-content: space-between;
}

.left-img, .right-text{
  flex: 1;
}

HTML:

<div class="outer-main-container">
<div class="inner-short-container">
    <div class="flex">
        <div class="left-img">
            <img width="200px" src="https://media-cldnry.s-nbcnews.com/image/upload/newscms/2019_41/3044956/191009-cooking-vegetables-al-1422-3044956.jpg" />
        </div>
        <div class="right-text">
            <h2> Header text will go here</h2>
            <p> You will find delightful art pieces. Photographs, Graphics, Craft, FoodBlogs, Foundation paper piecing  and more </p>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
        </div>
    </div>
</div>

The other way around is to use display: grid this way and use a grid-gap between the elements:

CSS:

.outer-main-container {
  padding: 3em 0em;
  background-color: #f7f0e8;
}

.inner-short-container {
  width: 80%;
  max-width: 750px;
  margin: 0 auto;
}

.flex {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 5%;
 }

.left-img, .right-text{
  flex: 1;
}

HTML:

<div class="outer-main-container">
<div class="inner-short-container">
    <div class="flex">
        <div class="left-img">
            <img width="200px" src="https://media-cldnry.s-nbcnews.com/image/upload/newscms/2019_41/3044956/191009-cooking-vegetables-al-1422-3044956.jpg" />
        </div>
        <div class="right-text">
            <h2> Header text will go here</h2>
            <p> You will find delightful art pieces. Photographs, Graphics, Craft, FoodBlogs, Foundation paper piecing  and more </p>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
        </div>
    </div>
</div>

Answer 3

Your image is set to 100% width forcing your text below it. Not sure what you want the dimensions on your image to be but change it from 100% if you want them side by side.

You should also set a width on your text element if you don't want it to span 100% of the available space by default.

.outer-main-container {
  padding: 3em 0em;
  background-color: #f7f0e8;
}

.inner-short-container {
  width: 80%;
  max-width: 750px;
  margin: 0 auto;
}

.flex {
  display: flex;
  justify-content: space-between;
}

img {
  display: block;
  width: 5rem; /* change this from 100% */
  height: 5rem;
  background-color: #222;
}

.right-text {
  width: 20rem; /* give width to text */
}

<div class="outer-main-container">
  <div class="inner-short-container">
    <div class="flex">
      <div class="left-img">
        <img src="#" />
      </div>
      <div class="right-text">
        <h2> Header text will go here</h2>
        <p> You will find delightful art pieces. Photographs, Graphics, Craft, FoodBlogs, Foundation paper piecing and more </p>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
          sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
      </div>
    </div>
  </div>
</div>