Flex justify-content: center overwrite

Question

I'm having an issue with flex and I have been giving it thought and don't understand what my code is doing.

So my goal is to center image and text using FlexBox. I used justify-content: center to center the containers on the x-axis and align-item: center to center the containers on the y-axis.

It works like butter except for when I collapse it. I implemented flex-wrap: wrap because I want the picture to drop down underneath, this works just fine.

But when I decrease the screen even further the text container for some reason skews to the left. It seems like justify-content: center is being overwritten. Can someone explain what is happening and how to fix this?

#smaller-image{
  width: 250px;
  height: 250px;
  border-radius: 50%;
} 

.parent{
  border-style: solid;
  border-color: green;
  max-width:1000px;
  min-height:500px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;

}

#aboutmetext{
  width: 600px;
  margin: 0 20px 0 0;
  border-style: solid;
  border-color: green;
  text-align: right;

}

#tryout{
  border-style: solid;
  border-color: green;
}

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
      </button>
      <a class="navbar-brand">MMB</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a>About</a></li>
        <li><a>Portfolio</a></li>
        <li><a>Contact</a><li>
      </ul>
    </div>
  </div>
</nav>


<div class="parent">
  <div id="aboutmetext">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ita relinquet duas, de quibus etiam atque etiam consideret. Atque his de rebus et splendida est eorum et illustris oratio. Claudii libidini, qui tum erat summo ne imperio, dederetur. Eam si varietatem diceres, intellegerem, ut etiam non dicente te intellego; Sint ista Graecorum; Duo Reges: constructio interrete. Piso igitur hoc modo, vir optimus tuique, ut scis, amantissimus. At iam decimum annum in spelunca iacet. Sapientem locupletat ipsa natura, cuius divitias Epicurus parabiles esse docuit. Qui-vere falsone, quaerere mittimus-dicitur oculis se privasse;</p>
  </div>
  <div id="tryout">
    <img src="http://res.cloudinary.com/dqoqzoncd/image/upload/v1474214059/YzW4rUu_f69vph.jpg" alt="Manuel Martin" id="smaller-image"> 
  </div>
</div>

CODEPEN LINK: codepen.io/mmartinb

score 1 · Answer 1 · edited May 23 '17 at 11:48

The problem is that you defined a margin-right with a value of 20px. This is affecting your layout when it wraps.

An alternative is to use justify-content: space-around; instead of center and remove the margin-right.

Code Snippet:

#smaller-image {
  width: 250px;
  height: 250px;
  border-radius: 50%;
}
.parent {
  border-style: solid;
  border-color: green;
  max-width: 1000px;
  min-height: 500px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}
#aboutmetext {
  width: 600px;
  border-style: solid;
  border-color: green;
  text-align: right;
}
#tryout {
  border-style: solid;
  border-color: green;
}

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
      </button>
      <a class="navbar-brand">MMB</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a>About</a>
        </li>
        <li><a>Portfolio</a>
        </li>
        <li><a>Contact</a>
          <li>
      </ul>
    </div>
  </div>
</nav>


<div class="parent">
  <div id="aboutmetext">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ita relinquet duas, de quibus etiam atque etiam consideret. Atque his de rebus et splendida est eorum et illustris oratio. Claudii libidini, qui tum erat summo ne imperio, dederetur. Eam si
      varietatem diceres, intellegerem, ut etiam non dicente te intellego; Sint ista Graecorum; Duo Reges: constructio interrete. Piso igitur hoc modo, vir optimus tuique, ut scis, amantissimus. At iam decimum annum in spelunca iacet. Sapientem locupletat
      ipsa natura, cuius divitias Epicurus parabiles esse docuit. Qui-vere falsone, quaerere mittimus-dicitur oculis se privasse;</p>
  </div>
  <div id="tryout">
    <img src="http://res.cloudinary.com/dqoqzoncd/image/upload/v1474214059/YzW4rUu_f69vph.jpg" alt="Manuel Martin" id="smaller-image">
  </div>
</div>

Here's another answer I have provided that may help you better understand justify-content values, along with some useful flexbox resources in the more info section.

score 1 · Accepted Answer · answered Sep 20 '16 at 14:36

It's due to this CSS rule (the right margin of 20px in there):

#aboutmetext{
  width: 600px;
  margin: 0 20px 0 0;
  border-style: solid;
  border-color: green;
  text-align: right;
}

You can simply create a media query that sets this margin to 0 as soon as the blocks are displayed below each other.

Flex justify-content: center overwrite

2 Answers2