使用Flexbox的导航栏

时间:2020-07-09 00:14:06

标签: html css flexbox

因此,我已经设置了导航栏,它也可以响应,但可以响应特定的屏幕尺寸。之后,它不会缩小。我认为媒体查询在这里开始,但我无法解决。我要达到的目标是,一旦屏幕下降太多,则每个项目都应堆叠在另一个之下。

stats = list(map(lambda stat: stat.text, listing.find_all('div', {'class': 'hero_stat'})))   # this is a list
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;
}

2 个答案:

答案 0 :(得分:0)

由于您已经在使用flex,因此应该可以解决问题:

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

答案 1 :(得分:0)

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

    .container { 显示:flex; 背景颜色:浅蓝色; 边框:1px纯浅蓝色; border-radius:10px; flex-wrap:包装; }

  • 然后在某个断点处添加媒体查询,例如400 px或320 px,如下所示:

    @media屏幕和(最大宽度:400像素){ 。容器 { flex-direction:列; } }