Flex justify-content：居中覆盖

Posted 2023-03-29

【中文标题】Flex justify-content：居中覆盖

【英文标题】：Flex justify-content: center overwrite

【发布时间】：2017-01-28 07:44:28

【问题描述】：

我在使用 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"  id="smaller-image"> 
  </div>
</div>

CODEPEN 链接： codepen.io/mmartinb

【参考方案1】：

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

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

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

【参考方案2】：

问题是您定义了一个值为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"  id="smaller-image">
  </div>
</div>

---

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