我已将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,sans-serif;
flex: 10%;
}
}