Welcome to OverStack Developer Community-Open, Learning,Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
398 views
in Technique[技术] by (71.8m points)

flex-shrink: 0;看起来好像没起作用?请问这是为什么?

HTML

<div class="app">
    <div class="wrap">11</div>
</div>

CSS

html,body{
    margin: 0;
    padding: 0;
}
.app{
    width: 100vw;
    display: flex;
    justify-content: center;
}
.wrap{
    width: 1440px;
    height: 900px;
    flex-shrink: 0;
}

如上代码,当给app设置display:flex之后,正常情况如图所示:
image.png

但是当我把浏览器缩小到1440以下时,检查元素显示wrap的宽度仍然是1440,但是左上角的11却看不见了,请问这是为什么?
image.png


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

我知道了,正确做法应该是,当父容器用了display:flex; justify-content:center;并且子容器有固定宽度时,那么应该给父容器加上min-width:子容器的宽;,这个问题就解决了。


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OverStack Developer Community-Open, Learning and Share
...