Flex对齐-内容:中心覆盖

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链接： Codemen.io/mmartinb

Answer 1

这要归功于这个CSS规则(此处20 in的右边距)：

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

您可以简单地创建一个媒体查询，当这些块显示在彼此下面时，该查询将这个边距设置为0。

Answer 2

问题是您定义了一个值为margin-right的20px。这是影响您的布局时，它包装。

另一种选择是使用justify-content: space-around;而不是中心，并删除margin-right。

代码片段：

​

#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>

​

下面是我提供的另一个答案，可以帮助您更好地理解justify-content值，以及更多信息部分中的一些有用的挠性盒资源。