如何製作居中動態寬度柔性盒

此標記應產生一個寬度爲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>

來源

2017-10-16 Lance Pollard

請試試這個。給予width:100%至body > div > div和body > 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>

來源

2017-10-16 03:57:11

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

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

它還設置有一個max-width:600px與margin-left和margin-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>

來源

2017-10-16 04:14:32 jfeferman

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

原因是它的默認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>

來源

2017-10-16 06:14:01 LGSon

如何製作居中動態寬度柔性盒

回答

相關問題