中心flex水平划分

Question

我有三个具有不同弹性基础的div。为了使页面响应，如果屏幕的宽度小于1000px，我想将它们置于一对一的中心。 这是我在Codepen上的例子：

＆＃13;

＆＃13;

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

.left {
  flex-basis: 555px;
}

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

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

/* style for this demo */
.wrapper > div {
  box-sizing: border-box;
  border: 1px solid black;
  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;
}

＆＃13;

<div class="wrapper">
  <div class="left">
    <div class="links">
      <a class="left__nav" href="#">Left Nav </a>
    </div>
  </div>
  <div class="right">
   Right
  </div>
  <div class="button">
    Button
  </div>
</div>
<div class="mark-center">
  &uarr;
</div>
<div class="container-small">
  Center
</div>

＆＃13;

＆＃13;

＆＃13;

如果宽度，请帮我把它们放到那里。 1000px下一步：

Answer 1

我觉得你不想要flex-basis，你想要width，因为这些元素不会增长或缩小。

如果是这样，您可以使用媒体查询，并在将column属性切换为flex-basis后将折弯方向更改为width 。

@media (max-width:1100px) {
  .wrapper {
    flex-direction:column;
    align-items: center;
  }
}

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

.left {
  width: 555px;
}

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

.wrapper .right {
  width: 462px;
  /* display: flex; */
  /* justify-content: flex-end; */
  /*  align right (at end)  */
}

.wrapper .button {
  width: 193px;
  text-align: center;
}


/* style for this demo */

.wrapper>div {
  box-sizing: border-box;
  border: 1px solid black;
  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;
}

@media (max-width:1100px) {
  .wrapper {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

<div class="wrapper">
  <div class="left">
    <div class="links">
      <a class="left__nav" href="#">Left Nav </a>
    </div>
  </div>
  <div class="right">
    Right
  </div>
  <div class="button">
    Button
  </div>
</div>
<div class="mark-center">
  &uarr;
</div>
<div class="container-small">
  Center
</div>