Question

我已将flexbox设置为由3个li项组成的ul，它们运行良好。当用户的屏幕尺寸小于600px时，我希望所有li项目都显示在新行上。这不起作用！它们仍然继续在同一行显示吗？出了什么问题？

这是我的html：-

<ul>
        <li><h1>My Photography Works</h1></li>
        <li><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero nisi neque accusamus cum quibusdam rerum error nulla quidem et distinctio illum est, praesentium incidunt doloremque ducimus molestias quod explicabo aliquam!</p></li>
        <li><h3>Contact Me Now</h3></li>
    </ul>

    <ul>
            <li><h1>Published Papers</h1></li>
            <li><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero nisi neque accusamus cum quibusdam rerum error nulla quidem et distinctio illum est, praesentium incidunt doloremque ducimus molestias quod explicabo aliquam!</p></li>
            <li><h3>Browse them now</h3></li>
    </ul>

这是我的style.scss

ul{
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    justify-content: space-between;

    li{
        margin-bottom: 10px;
    }

    @media screen and (max-width: 600px) {
        flex: 100%;
      }

    li:nth-child(1){
        font-family: Arial, Helvetica, sans-serif;
        flex: 20%;

    }

    li:nth-child(2){
        font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
        font-size: 18px;
        flex: 50%;
    }

    li:nth-child(3){
        font-family: Arial, Helvetica, sans-serif;
        flex: 10%;
    }
}

Answer 1

将flex-direction更改为column：

ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  justify-content: space-between;
}

li {
  margin-bottom: 10px;
}

@media screen and (max-width: 600px) {
  ul {
    flex-direction: column;
  }
}

li:nth-child(1) {
  font-family: Arial, Helvetica, sans-serif;
  flex: 20%;
}

li:nth-child(2) {
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  font-size: 18px;
  flex: 50%;
}

li:nth-child(3) {
  font-family: Arial, Helvetica, sans-serif;
  flex: 10%;
}

Here is my html:-

<ul>
  <li>
    <h1>My Photography Works</h1>
  </li>
  <li>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero nisi neque accusamus cum quibusdam rerum error nulla quidem et distinctio illum est, praesentium incidunt doloremque ducimus molestias quod explicabo aliquam!</p>
  </li>
  <li>
    <h3>Contact Me Now</h3>
  </li>
</ul>

<ul>
  <li>
    <h1>Published Papers</h1>
  </li>
  <li>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero nisi neque accusamus cum quibusdam rerum error nulla quidem et distinctio illum est, praesentium incidunt doloremque ducimus molestias quod explicabo aliquam!</p>
  </li>
  <li>
    <h3>Browse them now</h3>
  </li>
</ul>

弹性套换不起作用，因为将列表项flex更改为100%不起作用，因为li:nth-child(*)是更具体的选择器。您可以在媒体查询中使用更具体的选择器覆盖它：

ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  justify-content: space-between;
}

li {
  margin-bottom: 10px;
}



li:nth-child(1) {
  font-family: Arial, Helvetica, sans-serif;
  flex: 20%;
}

li:nth-child(2) {
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  font-size: 18px;
  flex: 50%;
}

li:nth-child(3) {
  font-family: Arial, Helvetica, sans-serif;
  flex: 10%;
}

@media screen and (max-width: 600px) {
  ul li:nth-child(1), ul li:nth-child(2), ul li:nth-child(3) {
    flex: 100%;
  }
}

Here is my html:-

<ul>
  <li>
    <h1>My Photography Works</h1>
  </li>
  <li>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero nisi neque accusamus cum quibusdam rerum error nulla quidem et distinctio illum est, praesentium incidunt doloremque ducimus molestias quod explicabo aliquam!</p>
  </li>
  <li>
    <h3>Contact Me Now</h3>
  </li>
</ul>

<ul>
  <li>
    <h1>Published Papers</h1>
  </li>
  <li>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero nisi neque accusamus cum quibusdam rerum error nulla quidem et distinctio illum est, praesentium incidunt doloremque ducimus molestias quod explicabo aliquam!</p>
  </li>
  <li>
    <h3>Browse them now</h3>
  </li>
</ul>

调整屏幕大小后，为什么我的flexbox项不显示在下一行

1 个答案: