Question

我遇到了flex的问题，我一直在考虑并且不了解我的代码在做什么。

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

它像黄油一样，除非我崩溃了。我实现了flex-wrap: wrap，因为我希望图片在下面放下，这很好用。

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

＆＃13;

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

＆＃13;

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

＆＃13;

CODEPEN LINK： codepen.io/mmartinb

Answer 1

问题是您定义了margin-right，其值为20px。这会影响您的布局。

另一种方法是使用justify-content: space-around;代替中心，然后移除margin-right。

代码段：

＆＃13;

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

＆＃13;

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

＆＃13;

Here's我提供的另一个答案可以帮助您更好地理解justify-content值，以及更多信息部分中的一些有用的弹性箱资源。

Answer 2

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

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

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

Flex justify-content：center overwrite

2 个答案: