如何将两个
.container{ border: 2px solid black; display: flex; flex-wrap: wrap;}.container-part{ width: 50%;}
.container{
border: 2px solid black;
display: flex;
flex-wrap: wrap;
}
.container-part{
width: 50%;
<div class="container"> <div class="container-part"> 1 </div> <div class="container-par"> 2 </div> </div>
<div class="container">
<div class="container-part">
1
</div>
<div class="container-par">
2
div在另一个下面,属性显示在缩小尺寸时灵活。
jgzswidk1#
你需要min-width属性到container-part,这样当它溢出时,它会 Package div。https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrapflex-wrap:wrap所做的是,当div的总宽度超过视口的宽度时,它会将div Package 到另一行。如果你没看到这里面的错字
min-width
flex-wrap:wrap
at0kjp5o2#
试试这个:
* I added media Query of max-width: 600px and added flex-direction: column;` * so when your screen size goes below 600px then div will show in column
* I added media Query of max-width: 600px and added flex-direction: column;`
* so when your screen size goes below 600px then div will show in column
.container{ border: 2px solid black; display: flex; flex-wrap: wrap;}.container-part{ width: 50%;}@media only screen and (max-width: 600px) {.container{ flex-direction: column;}}
@media only screen and (max-width: 600px) {
flex-direction: column;
2条答案
按热度按时间jgzswidk1#
你需要
min-width
属性到container-part,这样当它溢出时,它会 Package div。https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap
flex-wrap:wrap
所做的是,当div的总宽度超过视口的宽度时,它会将div Package 到另一行。如果你没看到这里面的错字
at0kjp5o2#
试试这个: