首页
前端开发
flex-grow 没有按预期调整弹性项目的大小

flex-grow 没有按预期调整弹性项目的大小 [英] flex-grow not sizing flex items as expected

查看：23 发布时间：2021/12/1 16:54:10 html css flexbox

本文介绍了flex-grow 没有按预期调整弹性项目的大小的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

似乎 flex div 中的内容会影响其关于 flex-grow 属性的计算大小.难道我做错了什么?

在下面提供的小提琴中，您会看到一个数字键盘.除底行外，所有行都包含 3 个数字.该行的 '0' 应该是 2 个数字的宽度，因此 flex-grow: 2 和 ':'(冒号)是 1 个数字的大小，因此 flex-grow:1.

我在这里遗漏了什么吗?

0"的右侧应该与其上方的 8、5 和 2 对齐.有点不对劲.

.numbers {显示:弹性；弹性方向:列；}.排 {显示:弹性；弹性方向:行；弹性增长:1；对齐内容:间隔；}.按钮 {显示:弹性；弹性增长:1；对齐内容:居中；对齐项目:居中；边距:5px；边框半径:5px；边框:1px纯灰色；背景:rgba(255, 255, 255, 0.2);光标:指针；}.button#number0 {弹性增长:2；}.button#冒号{弹性增长:1；}


<div class="row"><div class="button number" id="number1">1</div><div class="button number" id="number2">2</div><div class="button number" id="number3">3</div>
<div class="row"><div class="button number" id="number4">4</div><div class="button number" id="number5">5</div><div class="button number" id="number6">6</div>

<div class="row"><div class="button number" id="number7">7</div><div class="button number" id="number8">8</div><div class="button number" id="number9">9</div>

<div class="row"><div class="button number" id="number0">0</div><div class="button" id="colon">:</div>

水平边距每行 10 像素，第 4 行的可用空间比其他行多 10 像素.这会破坏列的对齐方式.

因为 flex-grow 仅适用于可用空间，并且受内容和边距的影响很大，所以它不是调整弹性项目大小的最安全方法.

试试flex-basis.将此添加到您的代码中:

.button { flex-basis: 33.33%;}#number0 { flex-basis: calc(66.67% + 10px);}* { box-sizing: border-box;}

.numbers {显示:弹性；弹性方向:列；}.排 {显示:弹性；弹性方向:行；弹性增长:1；对齐内容:间隔；}.按钮 {显示:弹性；弹性基础:33.33%；对齐内容:居中；对齐项目:居中；边距:5px；边框半径:5px；边框:1px纯灰色；背景:rgba(255, 255, 255, 0.2);光标:指针；}#number0 { flex-basis: calc(66.67% + 10px);}* { box-sizing: border-box;}


<div class="row"><div class="button number" id="number1">1</div><div class="button number" id="number2">2</div><div class="button number" id="number3">3</div>
<div class="row"><div class="button number" id="number4">4</div><div class="button number" id="number5">5</div><div class="button number" id="number6">6</div>

<div class="row"><div class="button number" id="number7">7</div><div class="button number" id="number8">8</div><div class="button number" id="number9">9</div>

<div class="row"><div class="button number" id="number0">0</div><div class="button" id="colon">:</div>

<小时>

扩展分析

你写道:

<块引用>

似乎 flex div 中的内容会影响其关于 flex-grow 属性的计算大小.难道我做错了什么?

问题的根源不是弹性项目内的内容.

你写道:

<块引用>

在下面提供的小提琴中，您会看到一个数字键盘.除底行外，所有行都包含 3 个数字.该行的 '0' 应该是 2 个数字的宽度，因此 flex-grow: 2 和 ':' 是 1 个数字的大小，因此 flex-grow: 1.我在这里遗漏了什么吗?

是的.您对 flex-grow 属性的解释不正确.flex-grow 不用于定义弹性项目的大小.它的工作是在项目之间分配 flex 容器中的可用空间.

通过将 flex-grow: 1 应用于一组 flex 项目，您是在告诉他们在它们之间均匀分配可用空间.这就是为什么在您的演示中，第 1、2 和 3 行具有相同大小的弹性项目.

当您应用 flex-grow: 2 时，您是在告诉 flex 项目消耗的可用空间是带有 flex-grow: 1 的项目的两倍.

但是从上面的行开始的第二个 10px 边距会影响第 4 行的布局吗?

第 4 行的对齐方式关闭的原因是第 4 行的边距比其他行少一个，这意味着第 4 行的可用空间比其他行多 10px.

您会注意到，如果您删除边距规则，您将获得所需的对齐方式.

.numbers {显示:弹性；弹性方向:列；}.排 {显示:弹性；弹性方向:行；弹性增长:1；对齐内容:间隔；}.按钮 {显示:弹性；弹性增长:1；对齐内容:居中；对齐项目:居中；/* 边距:5px;*/边框半径:5px；边框:1px纯灰色；背景:rgba(255, 255, 255, 0.2);光标:指针；}.button#number0 {弹性增长:2；}.button#冒号{弹性增长:1；}


<div class="row"><div class="button number" id="number1">1</div><div class="button number" id="number2">2</div><div class="button number" id="number3">3</div>
<div class="row"><div class="button number" id="number4">4</div><div class="button number" id="number5">5</div><div class="button number" id="number6">6</div>

<div class="row"><div class="button number" id="number7">7</div><div class="button number" id="number8">8</div><div class="button number" id="number9">9</div>

<div class="row"><div class="button number" id="number0">0</div><div class="button" id="colon">:</div>

<小时>那么第四行到第二个 10px 边距会发生什么? 
它被两个弹性项目吸收了.
<块引用>以下是 flex-grow 在第四行分配额外空间的方式:
左侧的 Flex 项目(内容为0")具有 flex-grow: 2.(.button#number0 在您的代码中.)
Flex 项目右侧(内容为:")具有 flex-grow: 1.(.button#colon 在您的代码中.)
第二个项目间边距仅出现在包含三个 flex 项目的行上，宽度为 10 像素.(代码说每个项目周围 5px，但在CSS 水平边距从不崩溃.此外，在 flexbox 中，没有边距崩溃.)
flex-grow 值的总和是三个.那么让我们将 10px 除以 3.现在我们知道 1 的比例是 3.33px.
因此，flex item left 获得 6.66px 的额外空间，flex item right 获得 3.33px.
假设左边的 flex item 有 flex-grow: 3 代替.那么左边的 flex item 会得到 7.5px，右边的 flex item 会得到 2.5px.
<小时>
你问题的最后一部分说:
<块引用>0"的右侧应该与其上方的 8、5 和 2 对齐.有点不对劲.
因为 flex-grow 仅适用于可用空间，并且受内容和边距的影响很大，所以它不是调整弹性项目大小的最安全方法.
试试flex-basis.将此添加到您的代码中:
.button { flex-basis: 33.33%;}#number0 { flex-basis: calc(66.67% + 10px);}* { box-sizing: border-box;}
.numbers {显示:弹性；弹性方向:列；}.排 {显示:弹性；弹性方向:行；弹性增长:1；对齐内容:间隔；}.按钮 {显示:弹性；弹性基础:33.33%；对齐内容:居中；对齐项目:居中；边距:5px；边框半径:5px；边框:1px纯灰色；背景:rgba(255, 255, 255, 0.2);光标:指针；}#number0 { flex-basis: calc(66.67% + 10px);}* { box-sizing: border-box;}
<div class="row"><div class="button number" id="number1">1</div><div class="button number" id="number2">2</div><div class="button number" id="number3">3</div>
<div class="row"><div class="button number" id="number4">4</div><div class="button number" id="number5">5</div><div class="button number" id="number6">6</div>
<div class="row"><div class="button number" id="number7">7</div><div class="button number" id="number8">8</div><div class="button number" id="number9">9</div>
<div class="row"><div class="button number" id="number0">0</div><div class="button" id="colon">:</div>
jsFiddle 演示
<小时>参考文献:
flex-grow 定义 ~ MDN
flex-basis 定义 ~ MDN
7.2 灵活性组件 ~ W3C
<小时>额外:CSS 网格解决方案
随着 CSS Grid 的出现，整个布局的代码可以大大简化.
.numbers {显示:网格；网格模板列:重复(自动填充，最小最大值(26％，1fr))；网格间距:10px；}#number0 {网格列:跨度 2；}/* 非必要的装饰风格 */.按钮 {显示:弹性；对齐内容:居中；对齐项目:居中；边框半径:5px；边框:1px纯灰色；}
<div class="button number" id="number1">1</div><div class="button number" id="number2">2</div><div class="button number" id="number3">3</div><div class="button number" id="number4">4</div><div class="button number" id="number5">5</div><div class="button number" id="number6">6</div><div class="button number" id="number7">7</div><div class="button number" id="number8">8</div><div class="button number" id="number9">9</div><div class="button number" id="number0">0</div><div class="button" id="colon">:</div>
It seems that the content inside a flex div affects its calculated size concerning the flex-grow property. Am I doing something wrong? 

In the fiddle provided below, you'll see a number pad. All the rows contain 3 numbers except the bottom row. That row should have the '0' be the width of 2 numbers, hence flex-grow: 2 and the ':' (colon) be the size of 1 number, hence flex-grow: 1. 

Am I missing something here? 

The right side of the '0' should be aligned with the 8, 5, and 2 above it. It's a bit off.





.numbers {
    display: flex;
    flex-direction: column;
}

.row {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    justify-content: space-between;
}

.button {
    display: flex;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
    margin: 5px;
    border-radius: 5px;
    border: 1px solid gray;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
}

.button#number0 {
    flex-grow: 2;
}

.button#colon {
    flex-grow: 1;
}

<div class="numbers">
    <div class="row">
        <div class="button number" id="number1">1</div>
        <div class="button number" id="number2">2</div>
        <div class="button number" id="number3">3</div>
    </div>
    <div class="row">
        <div class="button number" id="number4">4</div>
        <div class="button number" id="number5">5</div>
        <div class="button number" id="number6">6</div>
    </div>
    <div class="row">
        <div class="button number" id="number7">7</div>
        <div class="button number" id="number8">8</div>
        <div class="button number" id="number9">9</div>
    </div>
    <div class="row">
        <div class="button number" id="number0">0</div>
        <div class="button" id="colon">:</div>
    </div>
</div>





https://jsfiddle.net/0r4hemdu/
 解决方案 
Short Analysis

The problem is that rows 1-3 have two horizontal margins and row 4 only has one.



With horizontal margins at 10px each, row 4 has 10px more free space than the other rows. This throws off the alignment of the columns.

Because flex-grow applies only to free space, and is heavily influenced by content and margins, it's not the most secure way to size flex items.

Try flex-basis instead. Add this to your code:
.button    { flex-basis: 33.33%; }
#number0   { flex-basis: calc(66.67% + 10px); }
*          { box-sizing: border-box; }


.numbers {
    display: flex;
    flex-direction: column;
}

.row {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    justify-content: space-between;
}

.button {
    display: flex;
    flex-basis: 33.33%;
    justify-content: center;
    align-items: center;
    margin: 5px;
    border-radius: 5px;
    border: 1px solid gray;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
}

#number0   { flex-basis: calc(66.67% + 10px); }
*          { box-sizing: border-box; }

<div class="numbers">
    <div class="row">
        <div class="button number" id="number1">1</div>
        <div class="button number" id="number2">2</div>
        <div class="button number" id="number3">3</div>
    </div>
    <div class="row">
        <div class="button number" id="number4">4</div>
        <div class="button number" id="number5">5</div>
        <div class="button number" id="number6">6</div>
    </div>
    <div class="row">
        <div class="button number" id="number7">7</div>
        <div class="button number" id="number8">8</div>
        <div class="button number" id="number9">9</div>
    </div>
    <div class="row">
        <div class="button number" id="number0">0</div>
        <div class="button" id="colon">:</div>
    </div>
</div>







Extended Analysis

You wrote:

  It seems that the content inside a flex div affects its calculated size concerning the flex-grow property. Am I doing something wrong? 
The source of your problem is not the content inside the flex item.

You wrote:

  In the fiddle provided below, you'll see a number pad. All the rows contain 3 numbers except the bottom row. That row should have the '0' be the width of 2 numbers, hence flex-grow: 2 and the ':' be the size of 1 number, hence flex-grow: 1. Am I missing something here?
Yes. Your interpretation of the flex-grow property is incorrect. flex-grow is not intended for defining the size of a flex item. Its job is to distribute free space in the flex container among items.

By applying flex-grow: 1 to a group of flex items, you are telling them to distribute free space evenly among themselves. This is why, in your demo, rows 1, 2 and 3 have equally sized flex items.

When you apply flex-grow: 2, you are telling the flex item to consume twice as much free space as items with flex-grow: 1.

But where does the second 10px margin from the rows above factor into the layout of row 4?



The reason the alignment is off on row 4 is that row 4 has one less margin than the other rows, meaning that row 4 has 10px more free space than the other rows.

You'll notice that if you remove the margin rule you get your desired alignment.



.numbers {
    display: flex;
    flex-direction: column;
}

.row {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    justify-content: space-between;
}

.button {
    display: flex;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
    /* margin: 5px; */
    border-radius: 5px;
    border: 1px solid gray;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
}

.button#number0 {
    flex-grow: 2;
}

.button#colon {
    flex-grow: 1;
}

<div class="numbers">
    <div class="row">
        <div class="button number" id="number1">1</div>
        <div class="button number" id="number2">2</div>
        <div class="button number" id="number3">3</div>
    </div>
    <div class="row">
        <div class="button number" id="number4">4</div>
        <div class="button number" id="number5">5</div>
        <div class="button number" id="number6">6</div>
    </div>
    <div class="row">
        <div class="button number" id="number7">7</div>
        <div class="button number" id="number8">8</div>
        <div class="button number" id="number9">9</div>
    </div>
    <div class="row">
        <div class="button number" id="number0">0</div>
        <div class="button" id="colon">:</div>
    </div>
</div>







So what happens on row four to that second 10px margin? 

It gets absorbed by the two flex items.

  Here's how flex-grow distributes the extra space on row four:
  
  
  Flex item left (with content "0") has flex-grow: 2. (.button#number0 in your code.)
  Flex item right (with content ":") has flex-grow: 1. (.button#colon in your code.)
  The second inter-item margin, which appears only on rows with three flex items, is 10px wide. (The code says 5px around each item, but in
  CSS horizontal margins never
  collapse.
  Moreover, in flexbox, no margins
  collapse.)
  The sum total of the flex-grow values is three. So let's divide 10px by 3. Now we know that the proportion of 1 is 3.33px.
  Hence, flex item left gets 6.66px of the extra space, and flex item right gets 3.33px.
  Let's say that flex item left had flex-grow: 3 instead. Then flex item left would get 7.5px, and flex item right would get 2.5px.
  




The last part of your question says:

  The right side of the '0' should be aligned with the 8, 5, and 2 above it. It's a bit off.
Because flex-grow applies only to free space, and is heavily influenced by content and margins, it's not the most secure way to size flex items.

Try flex-basis instead. Add this to your code:
.button    { flex-basis: 33.33%; }
#number0   { flex-basis: calc(66.67% + 10px); }
*          { box-sizing: border-box; }


.numbers {
    display: flex;
    flex-direction: column;
}

.row {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    justify-content: space-between;
}

.button {
    display: flex;
    flex-basis: 33.33%;
    justify-content: center;
    align-items: center;
    margin: 5px;
    border-radius: 5px;
    border: 1px solid gray;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
}

#number0   { flex-basis: calc(66.67% + 10px); }
*          { box-sizing: border-box; }

<div class="numbers">
    <div class="row">
        <div class="button number" id="number1">1</div>
        <div class="button number" id="number2">2</div>
        <div class="button number" id="number3">3</div>
    </div>
    <div class="row">
        <div class="button number" id="number4">4</div>
        <div class="button number" id="number5">5</div>
        <div class="button number" id="number6">6</div>
    </div>
    <div class="row">
        <div class="button number" id="number7">7</div>
        <div class="button number" id="number8">8</div>
        <div class="button number" id="number9">9</div>
    </div>
    <div class="row">
        <div class="button number" id="number0">0</div>
        <div class="button" id="colon">:</div>
    </div>
</div>





jsFiddle demo



References:


flex-grow definition ~ MDN
flex-basis definition ~ MDN
7.2 Components of Flexibility ~ W3C




EXTRA: CSS GRID SOLUTION

With the advent of CSS Grid, the code for this entire layout can be greatly simplified. 



.numbers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(26%, 1fr));
  grid-gap: 10px;
}

#number0 {
  grid-column: span 2;
}


/* non-essential decorative styles */
.button {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  border: 1px solid gray;
}

<div class="numbers">
  <div class="button number" id="number1">1</div>
  <div class="button number" id="number2">2</div>
  <div class="button number" id="number3">3</div>
  <div class="button number" id="number4">4</div>
  <div class="button number" id="number5">5</div>
  <div class="button number" id="number6">6</div>
  <div class="button number" id="number7">7</div>
  <div class="button number" id="number8">8</div>
  <div class="button number" id="number9">9</div>
  <div class="button number" id="number0">0</div>
  <div class="button" id="colon">:</div>
</div>





                        这篇关于flex-grow 没有按预期调整弹性项目的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
                        
                    
                    
                        查看全文
                    
                
				
                            
                        
                
            
        
        
            



        
        
            相关文章
            
                    
                        
                            flex-grow不按预期调整flex项目大小;
                        
                    
                    
                        
                            Flex-grow 没有按预期工作(弹性项目没有我期望的宽度);
                        
                    
                    
                        
                            Flex-grow不能按预期工作（flex项目没有我预期的宽度）;
                        
                    
                    
                        
                            根据原始大小制作 flex-grow 展开项目;
                        
                    
                    
                        
                            使 flex-grow 根据原始大小扩展项目;
                        
                    
                    
                        
                            了解 flex-grow;
                        
                    
                    
                        
                            了解flex-grow;
                        
                    
                    
                        
                            如何让Flexbox（flex-grow）考虑内容大小？;
                        
                    
                    
                        
                            Transition flex-grow 在 flexbox 中的项目;
                        
                    
                    
                        
                            如何解释“ flex-grow：0”？;
                        
                    
                    
                        
                            flex:1 和 flex-grow:1 的区别;
                        
                    
                    
                        
                            Can I transition the flex-grow of a flex box to produce an animation?;
                        
                    
                    
                        
                            flex：1和flex-grow之间的区别：1;
                        
                    
                    
                        
                            了解flex和flex-grow属性之间的区别;
                        
                    
                    
                        
                            CSS网格是否具有flex-grow功能？;
                        
                    
                    
                        
                            IE10有flex-grow吗？;
                        
                    
                    
                        
                            flex-grow不适用于图像;
                        
                    
                    
                        
                            使网格项目使用带有flex-grow的flex项目之类的剩余空间：1;
                        
                    
                    
                        
                            我不明白 flex-grow 属性吗?;
                        
                    
                    
                        
                            我不明白flex-grow属性吗？;
                        
                    
                    
                        
                            flex-grow 和 width 有什么区别?;
                        
                    
                    
                        
                            在flex-grow：1的flex项目中，为什么padding扩展了宽度？;
                        
                    
                    
                        
                            flex-grow和width之间有什么区别？;
                        
                    
                    
                        
                            flex-grow 在列布局中不起作用;
                        
                    
                    
                        
                            高度：100％不能在flexbox中使用flex-grow;
                        
                    
            
        
        
            



        
    
    
        
            前端开发最新文章
            
                    
                        
                            为什么Chrome（在Electron内部）突然重定向到chrome-error：// chromewebdata？;
                        
                    
                    
                        
                            错误102（net :: ERR_CONNECTION_REFUSED）：服务器拒绝连接;
                        
                    
                    
                        
                            如何解决'重定向已被CORS策略阻止：没有'Access-Control-Allow-Origin'标题'？;
                        
                    
                    
                        
                            如何处理“Uncaught（in promise）DOMException：play（）失败，因为用户没有首先与文档交互。”在桌面上使用Chrome 66？;
                        
                    
                    
                        
                            警告：添加非被动事件侦听器到滚动阻塞'touchstart'事件;
                        
                    
                    
                        
                            如何在浏览器中播放.TS文件（视频/ MP2T媒体类型）？;
                        
                    
                    
                        
                            此请求已被阻止;内容必须通过HTTPS提供;
                        
                    
                    
                        
                            资源解释为样式表，但转换为MIME类型text / html（似乎与web服务器无关）;
                        
                    
                    
                        
                            通过HTTPS加载页面但请求不安全的XMLHttpRequest端点;
                        
                    
                    
                        
                            拒绝从执行脚本'*'，因为它的MIME类型（“应用/ JSON'）不是可执行文件，并严格MIME类型检查被启用。;
                        
                    
            
        
        
            
                热门教程
            
            
                
                    
                        Java教程
                    
                
                
                    
                        Apache ANT 教程
                    
                
                
                    
                        Kali Linux教程
                    
                
                
                    
                        JavaScript教程
                    
                
                
                    
                        JavaFx教程
                    
                
                
                    
                        MFC 教程
                    
                
                
                    
                        Apache HTTP客户端教程
                    
                
                
                    
                        Microsoft Visio 教程
                    
                
            
        
        
            
                热门工具
            
            
                
                
                    
                        Java 在线工具
                    
                
                
                    
                        C(GCC) 在线工具
                    
                
                
                    
                        PHP 在线工具
                    
                
                
                    
                        C# 在线工具
                    
                
                
                    
                        Python 在线工具
                    
                
                
                    
                        MySQL 在线工具
                    
                
                
                    
                        VB.NET 在线工具
                    
                
                
                    
                        Lua 在线工具
                    
                
                
                    
                        Oracle 在线工具
                    
                
                
                    
                        C++(GCC) 在线工具
                    
                
                
                    
                        Go 在线工具
                    
                
                
                    
                        Fortran 在线工具
                    
                
            
        
        
    


    

    
        
            登录
            关闭
        
        
            
                扫码关注1秒登录
            
            
                
            
            
                
                
            
            
                发送“验证码”获取
                |
                15天全站免登陆
            
            
        
    
    





    
		
			友情链接：
            IT屋
            Chrome插件
            谷歌浏览器插件
        
        
            IT屋
            ©2016-2022 琼ICP备2021000895号-1
            站点地图
            站点标签
            SiteMap
            <免责申明>
            本站内容来源互联网,如果侵犯您的权益请联系我们删除.