如何制作居中动态宽度柔性盒

此标记应产生一个宽度为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

如何制作居中动态宽度柔性盒

回答

相关问题