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 LINK: codepen.io/mmartinb

Answer 1

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

另一种方法是使用 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 值，以及更多信息部分中的一些有用的 flexbox 资源。

Answer 2

这是由于这个CSS规则（那里20px的右边距）：

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

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

Flex 对齐内容：中心覆盖

Flex justify-content: center overwrite

html

css

center

margin

flexbox