我正在制作一個應用了最大和最小寬度的 flex 框。但當我減小頁面大小時不起作用。它顯示空白區域。如何解決？
.parent{
border: 1px solid red;
width: 50%;
margin:0 auto;
display: flex;
flex-wrap: wrap;
}
.parent div {
background-color: yellow;
width: 50%;
min-width: 150px;;
max-width: 100%;
}
.parent div:last-child{
background-color: red;
margin:0 auto;
} <div class="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>當最小尺寸小于預期時，它不會移動到 100%。但顯示空白
uj5u.com熱心網友回復：
因為max-width和寬度不一樣。
你必須告訴元素盡可能地擴展到它的最大寬度，在這種情況下 flex:1
.parent{
border: 1px solid red;
width: 50%;
margin:0 auto;
display: flex;
flex-wrap: wrap;
}
.parent div {
background-color: yellow;
width: 50%;
min-width: 150px;;
max-width: 100%;
flex:1;
}
.parent div:last-child{
background-color: red;
margin:0 auto;
} <div class="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>uj5u.com熱心網友回復：
您可以通過使最后一個元素的寬度向下 100% 來解決此問題：
.parent{
border: 1px solid red;
width: 50%;
margin:0 auto;
display: flex;
flex-wrap: wrap;
}
.parent div {
background-color: yellow;
width: 50%;
min-width: 150px;;
max-width: 100%;
}
.parent div:last-child{
background-color: red;
width: 100%;
margin:0 auto;
} <div class="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/390298.html