Question

我的标题位于我网页的弹性框内容区域的中心位置。它右边大约30个像素。我应该改变柔性盒的尺寸吗？如果是这样，怎么样？建议非常感谢！

＆＃13;

a {
  outline: 0;
}

body {
  background: linear-gradient(to bottom, #1D4350, #A43931);
  background-attachment: scroll;
  font-family: 'PT Mono', monospace;
}

html,
body,
.wrapper {
  max-width: 100%;
  min-height: 100%;
  min-width: 960px;
  margin: 0 auto;
}

.wrapper {
  position: relative;
}

.content {
  height: 1200px;
}

.header {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.Octagon {
  color: #2aa186;
  line-height: 30%;
  margin-top: 25px;
}

.LT {
  color: #3a5454;
  line-height: 0;
  font-style: italic;
  text-align: center;
  position: relative;
  bottom: 33px;
}

.boi {
  position: relative;
  cursor: pointer;
  margin-right: 30px;
  padding: 8px 18px;
  border: 1px solid #204156;
  border-color: #52AEC9;
  color: #52AEC9;
  transition-duration: 0.25s;
  transition-timing-function: ease-in-out;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
}

.iob {
  position: relative;
  cursor: pointer;
  margin-left: 30px;
  padding: 8px 18px;
  border: 1px solid #204156;
  border-color: #52AEC9;
  color: #52AEC9;
  transition-duration: 0.25s;
  transition-timing-function: ease-in-out;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
}

.boi:active,
.iob:active {
  top: 3px;
}

.boi:hover,
.iob:hover {
  text-shadow: 0 0 10px #a193ff;
}

.manyarms,
.colorful {
  position: absolute;
  margin-top: 30px;
  margin-left: 30px;
}

.A1 img {
  -webkit-transition: all 0.75s ease-in-out;
  -moz-transition: all 0.75s ease-in-out;
  -ms-transition: all 0.75s ease-in-out;
  -o-transition: all 0.75s ease-in-out;
  transition: all 0.75s ease-in-out;
}

.manyarms,
.A1:hover .colorful {
  -webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
}

.A1:hover .manyarms,
.colorful {
  -webkit-opacity: 0;
  -moz-opacity: 0;
  opacity: 0;
}

.A2 img {
  -webkit-transition: all 0.75s ease-in-out;
  -moz-transition: all 0.75s ease-in-out;
  -ms-transition: all 0.75s ease-in-out;
  -o-transition: all 0.75s ease-in-out;
  transition: all 0.75s ease-in-out;
}

.sensible,
.A2:hover .BlueBoi {
  -webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
}

.A2:hover .sensible,
.BlueBoi {
  -webkit-opacity: 0;
  -moz-opacity: 0;
  opacity: 0;
}

.sensible,
.BlueBoi {
  margin-top: 30px;
  margin-right: 20px;
  right: 10px;
  position: absolute;
}

.VS {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.verr {
  padding-left: 31px;
  padding-top: 263px;
}

.special {
  padding-right: 71px;
  padding-top: 263px;
}

.footer {
  bottom: 0;
  left: 0;
  margin-right: 10px;
  position: fixed;
  text-align: right;
  width: 100%;
}

＆＃13;

<div class="wrapper">
  <div class="header">
    <a href="https://www.google.com/?gws_rd=ssl" target="_blank" style="text-decoration: none;">
      <p class="iob">Information</p>
    </a>
    <h1 class="Octagon">The Pragmatic Octopus</h1>
    <a href="https://www.google.com/?gws_rd=ssl" style="text-decoration: none;" target="_blank">
      <p class="boi">Contact</p>
    </a>
  </div>
  <p class="LT">Certes</p>
  <div class="content">
    <div class="A1">
      <img src="https://s32.postimg.org/406x38nlh/imageedit_1_3827627792.jpg" alt="hecc" style="width:310px; height:250px;" class="manyarms">
      <img src="https://s-media-cache-ak0.pinimg.com/736x/de/71/29/de71292c5df818b418fe09cbca9c49c2.jpg" alt="hecc2" style="width:310px; height:250px;" class="colorful">
    </div>
    <div class="A2">
      <img src="http://www.wonderslist.com/wp-content/uploads/2014/07/Blue-ringed-octopus.jpg" alt="hecc3" style="width:310px; height:250px;" class="sensible">
      <img src="http://img03.deviantart.net/a0a6/i/2010/007/6/4/octopus_by_mnk7.jpg" alt="hecc4" style="width:310px; height:250px;" class="BlueBoi">
    </div>
    <div class="VS">
      <p style="color: #6458b7;" class="verr">Here comes a very special boi!</p>
      <p style="color:#6458b7;" class="special">He loves to pose for photos!</p>
    </div>
  </div>
  <div class="footer">
    &copy;Hecc™®
  </div>
</div>

＆＃13;

Answer 1

以下是您用于对齐Flex项目的代码：

.header {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
}

使用space-between＆＃34;信息＆＃34;和＆＃34;联系＆＃34;元素将位于容器的相对边缘。

因为flex容器根据可用空间的分布来对齐项目，所以中间项目将居中于它们之间，而不一定以页面为中心。

使用＆＃34;信息＆＃34;计算宽度为174px，＆＃34; Contact＆＃34;计算宽度为135px时，中间项偏离中心39px。

为了使中间项目在页面上居中，其兄弟姐妹需要具有相等的宽度，因此两侧的空间平衡相等。

以下帖子有两种方法可以在兄弟姐妹的大小不同时在flex容器中居中项目：

Methods for Aligning Flex Items along the Main Axis（见方框＃71）

将元素置于flexbox中的两个兄弟之间

1 个答案: