我需要设置弹性项目的固定宽度才能使弹性收缩起作用吗？

Question

我很困惑为什么我的弹性收缩不起作用，直到我在我想要比其他项目收缩得更快的项目上设置固定的宽度或高度。

您可以在这里看到左右列如何以相同的速率收缩，并且 flex-shrink 似乎没有影响它。但是，例如，如果将 colLeft 和 colRight 的宽度更改为 300px，一旦容器缩小到 600px 或更少，那么 flex-shrink 就会开始起作用。我想知道如何在不设置左列固定宽度的情况下立即激活 Flex-Shrink。

如果实现此目的的唯一方法是为弹性项目设置任意宽度，那么最佳实践是什么？使用 px?他们？

*, 
*::before, 
*::after {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
}

body {
  margin: 0;
  height: 100vh;
  width: 100vw;
  border: 2px solid black;
}

.container {
  width: 100%;
  height: 100%;

  border: 2px solid blue;

  display: flex;
  justify-content: center;
  align-items: center;
  flex: row nowrap;
}

.colLeft, .colRight {
  height: 100%;
  width: 50%;
  border: 2px solid red;
  
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-evenly;
  align-items: center;
  align-content: space-around;
}
.colLeft {
  flex: 1 10 auto;
}
.colRight {
  flex: 1 1 auto;
}

<body>
  <div class="container">
    <div class="colLeft">
      1
    </div>
    <div class="colRight">
      2
    </div>
  </div>
</body>

Answer 1

您应该只需要

flex: 10;

相应的

flex: 1;

。
例如您使用

flex-basis

，而不是

flex-shrink

。
这里很好地解释了 Flexbox 的工作原理。

*, 
*::before, 
*::after {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
}

body {
  margin: 0;
  height: 100vh;
  width: 100vw;
  border: 2px solid black;
}

.container {
  width: 100%;
  height: 100%;

  border: 2px solid blue;

  display: flex;
  justify-content: center;
  align-items: center;
  flex: row nowrap;
}

.colLeft, .colRight {
  height: 100%;
  width: 50%;

  border: 2px solid red;
  
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-evenly;
  align-items: center;
  align-content: space-around;
}
.colLeft {
  flex: 1;
}
.colRight {
  flex: 10;
}

<body>
  <div class="container">
    <div class="colLeft">
      1
    </div>
    <div class="colRight">
      2
    </div>
  </div>
</body>

Answer 2

您只需将宽度从 50% 更改为 100%

.colLeft, .colRight {
  height: 100%;
  width: 100%; //instead of 50%

  border: 2px solid red;
  
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-evenly;
  align-items: center;
  align-content: space-around;
}

*, 
*::before, 
*::after {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
}

body {
  margin: 0;
  height: 100vh;
  width: 100vw;
  border: 2px solid black;
}

.container {
  width: 100%;
  height: 100%;

  border: 2px solid blue;

  display: flex;
  justify-content: center;
  align-items: center;
  flex: row nowrap;
}

.colLeft, .colRight {
  height: 100%;
  width: 100%;
  border: 2px solid red;
  
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-evenly;
  align-items: center;
  align-content: space-around;
}
.colLeft {
  flex: 1 10 auto;
}
.colRight {
  flex: 1 1 auto;
}

<body>
  <div class="container">
    <div class="colLeft">
      1
    </div>
    <div class="colRight">
      2
    </div>
  </div>
</body>

我需要设置弹性项目的固定宽度才能使弹性收缩起作用吗？

问题描述投票：0回答：2

2个回答

最新问题

我需要设置弹性项目的固定宽度才能使弹性收缩起作用吗？

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2