html - flex 调整内容 : center overwrite

Question

我遇到了 flex 的问题，我一直在思考它，但不明白我的代码在做什么。

所以我的目标是使用 FlexBox 使图像和文本居中。我使用 justify-content: center 使容器在 x 轴上居中，并使用 align-item: center 使容器在 y 轴上居中。

除了我把它弄塌的时候，它就像黄油一样工作。我实现了 flex-wrap: wrap 因为我希望图片在下方下降，这很好用。

但是当我进一步缩小屏幕时，文本容器出于某种原因向左倾斜。似乎 justify-content: center 被覆盖了。有人可以解释发生了什么以及如何解决这个问题吗？

#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 链接: codepen.io/mmartinb

Answer 1

这是由于这个 CSS 规则(那里有 20px 的右边距):

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

只要 block 显示在彼此下方，您就可以简单地创建一个媒体查询，将此边距设置为 0。