拨开荷叶行,寻梦已然成。仙女莲花里,翩翩白鹭情。
IMG-LOGO
主页 文章列表 如何计算flexbox容器子元素的实际宽度?

如何计算flexbox容器子元素的实际宽度?

白鹭 - 2022-03-09 2010 0 0

我有这样的html和css代码。我有两个问题:

  1. 当视窗宽度为 600px 时,理论上左框应该是 150px 宽度,因为它是父级(600px)的 25%,但宽度是 120px。
  2. 右框不能达到100vw。它只需要widthOfParent- widthOfLeft我想它应该以某种方式溢位并达到100vw。
 <div class="container">
        <div class="left"></div>
        <div class="right"></div>
 </div>
* {
  margin: 0;
  padding: 0;
}
.container {
  height: 300px;
  /* your code here */
  display: flex;
  justify-content: start;
}

.left {
  background-color: #f44336;
  height: 100%;
  width: 25%;
  min-width: 100px;
}

.right {
  background-color: #2973af;
  height: 100%;
  width: 100vw;
}

密码箱: https ://codesandbox.io/s/admiring-darkness-cu99x ?file=/src/styles.css:0-293

uj5u.com热心网友回复:

你正面临收缩效应。在所有情况下,总宽度100vw 25%都大于100%因此两个项目将同等缩小。

由于您的容器也是全宽的,因此溢位将始终等于25%or 25vw两个元素都有默认的收缩值1,所以我们的总和等于125vw

第一个元素的宽度将等于:25vw - (25vw * 25vw/125vw) = 20vw 第二个元素的宽度将是:100vw - (25vw * 100vw/125vw) = 80vw

你可以从逻辑上看到总数是100vw( 20vw 80vw),当荧屏宽度等于时600px20vw等于120px

为避免这种情况,请通过设定禁用第一项的收缩效果 flex-shrink:0

* {
  margin: 0;
  padding: 0;
}

.container {
  height: 300px; /* your code here */
  display: flex;
}

.left {
  background-color: #f44336;
  width: 25%;
  min-width: 100px;
  flex-shrink:0;
}

.right {
  background-color: #2973af;
  width: 100vw;
}
<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

相关:为什么弹性项目仅限于父尺寸?

uj5u.com热心网友回复:

  1. 对弹性项目使用“flex”属性而不是宽度
  1. 右侧元素不能占据 100% 的宽度,因为它与 flex 父级中的左侧 div 一起,我们将宽度自变量分配为“flex: value”

CSS flex 属性 https://www.w3schools.com/cssref/css3_pr_flex.asp

标签:

0 评论

发表评论

您的电子邮件地址不会被公开。 必填的字段已做标记 *