Flexbox 列的宽度不会随着窗口大小的调整而缩小

问题描述 投票:0回答:4

当浏览器窗口缩小时,我正在使用 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>

演示在这里:https://jsfiddle.net/CodeCabbie/1xvjeo3p/44/

css flexbox responsive-design
4个回答
3
投票

使用

width: 195px;
类的小盒子使用固定宽度(
.small
)看起来很奇怪,并且可以解释为什么这些列不会随着窗口大小的调整而缩小。

组合:

这将允许 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>


1
投票

如果不需要使用

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>


0
投票

解决方案

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>

jsFiddle 演示


-1
投票

只需将

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>

© www.soinside.com 2019 - 2024. All rights reserved.