特别收缩

Question

我应该如何改变CSS，

• 如果width of screen＆gt; 1100px然后left nav宽度始终为555px，但empty -space = width of screen

时1100px缩小为0

• 如果width of screen＆lt; 1100px然后left nav宽度正在缩小，empty -space div仍为0px。

右侧部分（div class=button和div class=right）保持不变

＆＃13;

＆＃13;

.wrapper {
  display: flex;
  margin: 0 auto;
  max-width: 1310px;
  font-size:0.6rem;
}
.wrapper .left {
  flex-basis: 555px;
  background-color: lightblue;
}

.left__nav {
  display: inline-block;
  padding: 5px;
  color: darkblue;
  text-decoration: none;
}

.empty-space {
  flex-basis: 100px;
  flex-shrink:1;
}
.wrapper .right {
  background-color: orange;

  flex-basis: 462px;
  display: flex;
  justify-content: flex-end; /*  align right (at end)  */
}
.wrapper .button {
  flex-basis: 193px;
  background-color: #3ab8a4;
  text-align:center;

}

/* style for this demo */
.wrapper > div {
  box-sizing: border-box;
  background-color: lightgray;
  border-collapse: collapse;
}
.mark-center {
  text-align: center;
  font-size: 30px;
  color: red;
}
.container-small {  
  text-align: center;
  background-color: lightgray;
  max-width: 1100px;
  margin: auto;
  padding:1rem 0;
  
}

＆＃13;

<div class="wrapper">
  <div class="empty-space">empty space
  </div>
  <div class="left">
    <a class="left__nav" href="#">Link3</a>
    Left Nav
  </div>
  <div class="right">
    Links right aligned
  </div>
  <div class="button">
    Button
  </div>
</div>
<div class="mark-center">
  &uarr;
</div>
<div class="container-small">
  Some content
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

最简单的方法是添加2个包装器，一个用于left侧，另一个用于right侧，并且您可以轻松地居中左/右链接包装器相遇的地方。

删除标记/ CSS中的<div class="empty-space">empty space</div>元素，然后在left侧的左侧创建空格，只需添加margin-left: auto到left_inner，它将被推到右边。

Stack snippet

＆＃13;

＆＃13;

.wrapper {
  display: flex;
  margin: 0 auto;
  max-width: 1310px;
  font-size: 0.6rem;
}

.wrapper .left,
.wrapper .right {
  flex-basis: 50%;
  display: flex;
}

.wrapper .left_inner {
  margin-left: auto;
  flex-basis: 555px;
  background-color: lightblue;
}
.wrapper .right_inner {
  flex-basis: 462px;
  background-color: orange;
  display: flex;
  justify-content: flex-end;      /*  align content right (at end)  */
}
.wrapper .button_inner {
  flex-basis: 193px;
  background-color: #3ab8a4;
  display: flex;
  justify-content: center;
  align-items: center;
}

.left__nav {
  display: inline-block;
  padding: 5px;
  color: darkblue;
  text-decoration: none;
}
.right__nav {
  display: inline-block;
  padding: 5px;
  color: darkred;
  text-decoration: none;
}

/* style for this demo */
.wrapper>div {
  box-sizing: border-box;
  background-color: lightgray;
  border-collapse: collapse;
}
.mark-center {
  text-align: center;
  font-size: 30px;
  color: red;
}
.container-small {
  text-align: center;
  background-color: lightgray;
  max-width: 1100px;
  margin: auto;
  padding: 1rem 0;
}

＆＃13;

<div class="wrapper">
  <div class="left">
    <div class="left_inner">
      <a class="left__nav" href="#">Link left</a>
    </div>
  </div>
  <div class="right">
    <div class="right_inner">
      <a class="right__nav" href="#">Link right</a>
    </div>
    <div class="button_inner">
      Button
    </div>
  </div>
</div>
<div class="mark-center">
  &uarr;
</div>
<div class="container-small">
  Some content
</div>

＆＃13;

＆＃13;

＆＃13;

更新

为了能够满足上述两个要求并将它们垂直，居中，在较窄的屏幕上叠加，您需要媒体查询或脚本。

以下是使用小于1000像素（max-width: 999px）

的媒体查询的更新版本

Stack snippet

＆＃13;

＆＃13;

.wrapper {
  display: flex;
  margin: 0 auto;
  max-width: 1310px;
  font-size: 0.6rem;
}

.wrapper .left,
.wrapper .right {
  flex-basis: 50%;
  display: flex;
}

.wrapper .left_inner {
  margin-left: auto;
  flex-basis: 555px;
  background-color: lightblue;
}
.wrapper .right_inner {
  flex-basis: 462px;
  background-color: orange;
  display: flex;
  justify-content: flex-end;      /*  align content right (at end)  */
}
.wrapper .button_inner {
  flex-basis: 193px;
  background-color: #3ab8a4;
  display: flex;
  justify-content: center;
  align-items: center;
}

.left__nav {
  display: inline-block;
  padding: 5px;
  color: darkblue;
  text-decoration: none;
}
.right__nav {
  display: inline-block;
  padding: 5px;
  color: darkred;
  text-decoration: none;
}

@media (max-width: 999px) {
  .wrapper,
  .wrapper .left,
  .wrapper .right {
    flex-basis: auto;
    flex-direction: column;
    align-items: center;
  }
  .wrapper .left_inner {
    flex-basis: auto;
    margin-left: 0;
  }
  .wrapper .right_inner,
  .wrapper .button_inner {
    flex-basis: auto;
  }
}

/* style for this demo */
.wrapper>div {
  box-sizing: border-box;
  background-color: lightgray;
  border-collapse: collapse;
}
.mark-center {
  text-align: center;
  font-size: 30px;
  color: red;
}
.container-small {
  text-align: center;
  background-color: lightgray;
  max-width: 1100px;
  margin: auto;
  padding: 1rem 0;
}

＆＃13;

<div class="wrapper">
  <div class="left">
    <div class="left_inner">
      <a class="left__nav" href="#">Link left</a>
    </div>
  </div>
  <div class="right">
    <div class="right_inner">
      <a class="right__nav" href="#">Link right</a>
    </div>
    <div class="button_inner">
      Button
    </div>
  </div>
</div>
<div class="mark-center">
  &uarr;
</div>
<div class="container-small">
  Some content
</div>

＆＃13;

＆＃13;

＆＃13;

如果您希望链接和按钮包装器填充宽度，请为它们指定宽度并使其内容居中对齐。

Stack snippet

＆＃13;

＆＃13;

.wrapper {
  display: flex;
  margin: 0 auto;
  max-width: 1310px;
  font-size: 0.6rem;
}

.wrapper .left,
.wrapper .right {
  flex-basis: 50%;
  display: flex;
}

.wrapper .left_inner {
  margin-left: auto;
  flex-basis: 555px;
  background-color: lightblue;
}
.wrapper .right_inner {
  flex-basis: 462px;
  background-color: orange;
  display: flex;
  justify-content: flex-end;      /*  align content right (at end)  */
}
.wrapper .button_inner {
  flex-basis: 193px;
  background-color: #3ab8a4;
  display: flex;
  justify-content: center;
  align-items: center;
}

.left__nav {
  display: inline-block;
  padding: 5px;
  color: darkblue;
  text-decoration: none;
}
.right__nav {
  display: inline-block;
  padding: 5px;
  color: darkred;
  text-decoration: none;
}

@media (max-width: 999px) {
  .wrapper,
  .wrapper .left,
  .wrapper .right {
    flex-basis: auto;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
  .wrapper .left_inner {
    flex-basis: auto;
    margin-left: 0;
    text-align: center;
    width: 100%;
  }
  .wrapper .right_inner,
  .wrapper .button_inner {
    flex-basis: auto;
    text-align: center;
    justify-content: center;
    width: 100%;
  }
}

/* style for this demo */
.wrapper>div {
  box-sizing: border-box;
  background-color: lightgray;
  border-collapse: collapse;
}
.mark-center {
  text-align: center;
  font-size: 30px;
  color: red;
}
.container-small {
  text-align: center;
  background-color: lightgray;
  max-width: 1100px;
  margin: auto;
  padding: 1rem 0;
}

＆＃13;

<div class="wrapper">
  <div class="left">
    <div class="left_inner">
      <a class="left__nav" href="#">Link left</a>
    </div>
  </div>
  <div class="right">
    <div class="right_inner">
      <a class="right__nav" href="#">Link right</a>
    </div>
    <div class="button_inner">
      Button
    </div>
  </div>
</div>
<div class="mark-center">
  &uarr;
</div>
<div class="container-small">
  Some content
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试使用媒体查询：

 @media only screen and (max-width: 1100px) {
   /*your css code */
 }

 @media only screen and (min-width: 1100px) {
   /*your css code */
 }

这里的w3c学校关于媒体查询的链接。

https://www.w3schools.com/css/css_rwd_mediaqueries.asp