当浏览器窗口缩小时,我正在使用 Flexbox 使 5 个框响应。其中 4 个盒子在 2 列中并且无法收缩 (
flex-direction: column
)。不在列中的单个框正确收缩。
(Bob 的行为正确,但 Kate、Nick、Jane 和 Fred 拒绝减少宽度。)
如何在浏览器窗口尺寸减小时缩小列宽?
.container {
display: flex;
width: 100%;
justify-content: center;
border: 2px solid red;
}
.column {
display: flex;
flex-direction: column;
}
.big {
display: flex;
width: 400px;
height: 400px;
background: yellow;
border: 5px solid blue;
}
.small {
display: flex;
width: 195px;
height: 195px;
background: yellow;
border: 5px solid blue;
}
<div class="container">
<div class="big"><span>Bob</span></div>
<div class="column">
<div class="small"><span>Kate</span></div>
<div class="small"><span>Nick</span></div>
</div>
<div class="column">
<div class="small"><span>Jane</span></div>
<div class="small"><span>Fred</span></div>
</div>
</div>
使用
width: 195px;
类的小盒子使用固定宽度(.small
)看起来很奇怪,并且可以解释为什么这些列不会随着窗口大小的调整而缩小。
组合:
flex-basis
小盒子flex-grow
列上的属性这将允许 all 列相应地分配剩余空间。
像这个例子:https://jsfiddle.net/ko4Lszdy/
.container {
display: flex;
width: 100%;
justify-content: center;
border: 2px solid red;
}
.column {
display: flex;
flex-direction: column;
flex-grow: 1;
/* Small columns will take 1/6 of the available space */
max-width: 200px;
}
.big {
display: flex;
flex-grow: 2;
/* Big column will take 2/3 of the available space */
max-width: 400px;
height: 400px;
background: yellow;
border: 5px solid blue;
}
.small {
display: flex;
flex-basis: 100%;
/* Allow the small boxes to grow/shrink as needed */
height: 195px;
background: yellow;
border: 5px solid blue;
}
<div class="container">
<div class="big"><span>Bob</span></div>
<div class="column">
<div class="small"><span>Kate</span></div>
<div class="small"><span>Nick</span></div>
</div>
<div class="column">
<div class="small"><span>Jane</span></div>
<div class="small"><span>Fred</span></div>
</div>
</div>
如果不需要使用
flexbox
,最好使用grid
布局创建所有这些。作为奖励,您将获得更简洁易懂的代码:
.container {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
/* optional */
grid-gap: 5px;
max-width: 800px;
margin: 0 auto;
background-color: blue;
padding: 5px;
}
.big {
grid-row: span 2;
min-height: 400px;
background: yellow;
}
.small {
background: yellow;
}
<div class="container">
<div class="big">Bob</div>
<div class="small">Kate</div>
<div class="small">Nick</div>
<div class="small">Jane</div>
<div class="small">Fred</div>
</div>
将
width: 195px
从.small
移动到.column
.
第二和第三列没有收缩,因为它们没有在主弹性容器中调整大小 (
.container
)。它们的大小在嵌套容器 (.column
) 内,这是 flex-shrink
无法触及的。
.container {
display: flex;
justify-content: center;
border: 2px solid red;
}
.column {
display: flex;
flex-direction: column;
width: 195px; /* new */
}
.big {
display: flex;
width: 400px;
height: 400px;
background: yellow;
border: 5px solid blue;
}
.small {
border: 5px solid blue;
/* width: 195px; */
height: 195px;
background: yellow;
display: flex;
}
body {
margin: 0;
}
<div class="container">
<div class="big"><span>Bob</span></div>
<div class="column">
<div class="small"><span>Kate</span></div>
<div class="small"><span>Nick</span></div>
</div>
<div class="column">
<div class="small"><span>Jane</span></div>
<div class="small"><span>Fred</span></div>
</div>
</div>
只需将
min-width: 0
添加到.column
类
min-width 的默认值为 auto,计算为零。 当元素是弹性项目时,min-width 的值不计算 归零。弹性项目的最小尺寸等于它的尺寸 内容。
.container {
display: flex;
width: 100%;
justify-content: center;
border: 2px solid red;
}
.column {
display: flex;
flex-direction: column;
min-width: 0;
}
.big {
display: flex;
width: 400px;
height: 400px;
background: yellow;
border: 5px solid blue;
}
.small {
border: 5px solid blue;
width: 195px;
height: 195px;
background: yellow;
display: flex;
}
<div class="container">
<div class="big"><span>Bob</span></div>
<div class="column">
<div class="small"><span>Kate</span></div>
<div class="small"><span>Nick</span></div>
</div>
<div class="column">
<div class="small"><span>Jane</span></div>
<div class="small"><span>Fred</span></div>
</div>
</div>