2017-10-16 85 views
1

此標記應產生一個寬度爲600px,高度居中的30px高的框。但相反,它縮小了盒子的寬度(或者如果有內容,它會縮小到最小內容寬度)。想知道如何做到這一點,所以居中框是600px,但在較小窗口大小時響應。如何製作居中動態寬度柔性盒

* { 
 
    position: relative; 
 
    box-sizing: border-box; 
 
} 
 

 
html, body { 
 
    height: 100%; 
 
    overflow: hidden; 
 
} 
 

 
div { 
 
    display: flex; 
 
} 
 

 
body > div { 
 
    align-items: center; 
 
    -webkit-box-pack: center; 
 
    -webkit-justify-content: center; 
 
    justify-content: center; 
 
    border: 1px solid orange; 
 
} 
 

 
body > div > div { 
 
    max-width: 600px; 
 
    border: 1px solid black; 
 
} 
 

 
body > div > div > div { 
 
    border: 1px solid blue; 
 
    background: red; 
 
    height: 30px; 
 
}
<div> 
 
    <div> 
 
    <div></div> 
 
    </div> 
 
</div>

回答

2

請試試這個。給予width:100%body > div > divbody > div > div > div類。

* { 
 
    position: relative; 
 
    box-sizing: border-box; 
 
} 
 

 
html, body { 
 
    height: 100%; 
 
    overflow: hidden; 
 
} 
 

 
div { 
 
    display: flex; 
 
} 
 

 
body > div { 
 
    align-items: center; 
 
    -webkit-box-pack: center; 
 
    -webkit-justify-content: center; 
 
    justify-content: center; 
 
    border: 1px solid orange; 
 
} 
 

 
body > div > div { 
 
    max-width: 600px; 
 
    border: 1px solid black; 
 
    width:100%; 
 
} 
 

 
body > div > div > div { 
 
    border: 1px solid blue; 
 
    background: red; 
 
    height: 30px; 
 
    width:100%; 
 
}
<div> 
 
    <div> 
 
    <div></div> 
 
    </div> 
 
</div>

0

請允許我的代碼簡化到它的基本組成部分。您有一個div.container,設置爲display:flex。裏面你有一個div你想要根據彈性參數進行調整。內格設置爲根據其容器來擴大和縮小:

flex: 1 1 auto; /* shorthand for flex-grow, flex-shrink, flex-basis */ 

它還設置有一個max-width:600pxmargin-leftmargin-right設置爲auto中心頁面。我相信這個結構符合你的要求。

div.container { 
 
    display: flex; 
 
    border: 1px solid orange; 
 
} 
 

 
div.container div { 
 
    flex: 1 1 auto; 
 
    border: 1px solid blue; 
 
    background: red; 
 
    height: 30px; 
 
    margin: 0 auto 0 auto; 
 
    max-width: 600px; 
 
}
<div class="container"> 
 
    <div></div> 
 
</div>

2

即柔性項目的默認行爲,是一樣寬它的內容,類似爲嵌入塊。

原因是它的默認flex-grow值,它是0並告訴它不填充剩餘空間。

flex-grow: 1添加到應填充其父項的每個柔性項目級別。

* { 
 
    position: relative; 
 
    box-sizing: border-box; 
 
} 
 

 
html, body { 
 
    height: 100%; 
 
    overflow: hidden; 
 
} 
 

 
div { 
 
    display: flex; 
 
} 
 

 
body > div { 
 
    align-items: center; 
 
    -webkit-box-pack: center; 
 
    -webkit-justify-content: center; 
 
    justify-content: center; 
 
    border: 1px solid orange; 
 
} 
 

 
body > div > div { 
 
    max-width: 600px; 
 
    border: 1px solid black; 
 
    flex-grow: 1;     /* added */ 
 
} 
 

 
body > div > div > div { 
 
    border: 1px solid blue; 
 
    background: red; 
 
    height: 30px; 
 
    flex-grow: 1;     /* added */ 
 
}
<div> 
 
    <div> 
 
    <div></div> 
 
    </div> 
 
</div>