小编Wil*_* P.的帖子

Flexbox"align-items:center"缩小了孩子的最大宽度

我有一个Flexbox的DIV container用align-items: center,有三个孩子的.其中一个max-width: 200px(在代码中second-ch),它也是一个flex,有两个子分发justify-content: space-between,但second-ch没有跟随它max-width.如果我align-items: center从中移除container,second-ch则再次获取所需的宽度,但其余元素不再位于中心.我怎么解决这个问题？

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.first-ch {
  width: 70px;
  height: 70px;
  background-color: grey;
}

.second-ch {
  max-width: 200px;
  height: 80px;
  background-color: red;
  display: flex;
  justify-content: space-between;
}
  .square {
    width: 50px;
    height: 50px;
    background-color: yellow;
    margin: 5px;
  }
.third-ch {
  width: 50px;
  height: 50px;
  background-color: blue;
}

Run Code Online (Sandbox Code Playgroud)