使用Flexbox的Navbar

Question

所以，我已经设置了一个Navbar，它也有反应，但对一定的屏幕大小。从那以后它就不会缩小尺寸了。我想媒体的质疑在这里开始，但我不能绕道而行。我想要实现的是，一旦屏幕下降太多，那么每个项目都应该在另一个下面堆积起来。

​

body {
  margin: 0 auto;
}

.container {
  display: flex;
  background-color: lightblue;
  border: 1px solid lightblue;
  border-radius: 10px;
}

.border {
  padding: 0px 10px;
}

.box-1 {
  flex: 0.1;
}

.box-2 {
  flex: 0.1;
}

.box-3 {
  flex: 0.1;
}

.box-4 {
  flex: 3;
  text-align: right;
}

.box-5 {
  flex: 0.1;
}

h4 {
  color: white;
  font-weight: normal;
}

<div class="container">
  <div class="box-1 border">
    <h4>Home</h4>
  </div>
  <div class="box-2 border">
    <h4>About</h4>
  </div>
  <div class="box-3 border">
    <h4>Contact</h4>
  </div>
  <div class="box-4 border">
    <h4>Login</h4>
  </div>
  <div class="box-5 border">
    <h4>Signup</h4>
  </div>
</div>

​

Answer 1

由于您已经在使用flex，所以这应该可以做到：

@media screen and (max-width: 356px) {
  .container {
    flex-direction: column;
    align-items: flex-start;
  }
}

Answer 2

• 首先在大屏幕中添加flex-wrap属性，如下所示：

.container {显示: flex；背景色:淡蓝色；边框:1 1px实心蓝光；边框半径:10 1px；挠性包装:包装；}

然后，

• 在某个断点上添加媒体查询，例如400 px或320 px，如下所示：

@媒体屏幕和(最大宽度:400 max){ .container {flex-方向:列；}