Html flexbox增长是否受flexbox基础的影响？

我有下面的HTML

<div class="container">
  <div class="box box1">one 

  Is flex-grow affected by flex-basis?



In a way, yes, as what 
flex-grow
 does is to distribute the space left, after the size of the items been reduced, where the items can be sized either by content or explicit set.


E.g., if the parent is 1000px wide, has 2 children where each child is 300px wide, the space left will be 1000px-300px-300px = 400px.


If one child has a flex grow value of 1 and the other has 10, the former will be 300px+(1/11*400px) and the latter 300px+(10/11*400px) 


Read more here about 
flex-grow



Flex-grow not working as expected (flex items don't have the widths I expect)

https://www.w3.org/TR/css-flexbox-1/#flex-grow-property 





So in your case, where each item is set to 500px using, 2 per row, when there will be space left, that space will be shared equally on all row but the one with 
box3
. On that row the space will be shared with 10/11 for 
box3
 and 1/11 for the other.


In case of 3 items per row, the shared for 
box3
 would be 10/12 and the other two 1/12 each. 





  Why is this not 10 times bigger?



In this case, when a width is set on the item's, 
flex-grow
 distribute the free space left among the items.


If you want to use 
flex-grow
 to size the items, give them a 
flex-basis
 of 
0
. That will make the calculations for 
flex-grow
 believe the items is empty, and by that it would be 10 times bigger.




/* We start writing out flexbox here. The above is just page setup */
.container {
  display:flex;
  flex-wrap:wrap;
}

.box {
  flex-basis:0;
  flex-grow:1;
  overflow: hidden;        /*  to allow items to be smaller
                               than its content  */
}

.box3 {
  flex-grow:10;
}


/* CSS Normalize */
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:700;}dfn{font-style:italic;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace, serif;font-size:1em;}pre{white-space:pre-wrap;word-wrap:break-word;}q{quotes:\201C \201D \2018 \2019;}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-.5em;}sub{bottom:-.25em;}img{border:0;}svg:not(:root){overflow:hidden;}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,html input[type=button],/* 1 */
input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer;}button[disabled],input[disabled]{cursor:default;}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0;}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}body,figure{margin:0;}legend,button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}

/* Box-sizing border-box */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }


/* Some default styles to make each box visible */
.box {
  color:white;
  font-size: 50px;
  text-align: center;
  text-shadow:4px 4px 0 rgba(0,0,0,0.1);
  padding:10px;
}

/* Colours for each box */
.box1 { background:#1abc9c;}
.box2 { background:#3498db;}
.box3 { background:#9b59b6;}
.box4 { background:#34495e;}
.box5 { background:#f1c40f;}
.box6 { background:#e67e22;}
.box7 { background:#e74c3c;}
.box8 { background:#bdc3c7;}
.box9 { background:#2ecc71;}
.box10 { background:#16a085;}
一
flex增长是否受flex基础的影响

在某种程度上，是的，正如flex grow所做的那样，在项目的大小减小之后，分配剩余的空间，其中项目的大小可以通过内容或显式设置来确定

例如，如果父级为1000px宽，有2个子级，其中每个子级为300px宽，则剩余空间为1000px-300px-300px=400px

如果一个子元素的flex grow值为1，另一个子元素的flex grow值为10，则前者为300px+1/11*400px，后者为300px+10/11*400px

阅读更多关于flex grow的信息


因此，在您的情况下，如果每行使用2将每个项目设置为500px，那么当剩余空间时，除了第3框中的那一行外，所有行上的空间都将平均共享。该行的空间将与10/11框3和1/11框3共享

如果每行有3个项目，则框3的共享值为10/12，其他两个为1/12

为什么这个不是10倍大

在这种情况下，当在项目上设置宽度时，flex grow会在项目之间分配剩余的可用空间

如果您想使用flex grow调整项目的大小，请将其flex basis设置为0。这将使flex grow的计算相信这些项目是空的，到那时它将是原来的10倍


/*我们从这里开始写flexbox。以上只是页面设置*/
.集装箱{
显示器：flex；
柔性包装：包装；
}
.盒子{
弹性基准：0；
柔性生长：1；
溢出：隐藏；/*以允许项目更小
而不是它的内容*/
}
.box3{
弹性增长：10；
}
/*CSS规范化*/
文章，旁白，细节，图片，页脚，页眉，H组，导航，节，摘要{显示：块；}音频，画布，视频{显示：内联块；}音频：非[控件]{显示：无；高度：0；}[隐藏]{显示：无；}html{字体系列：无衬线；-webkit文本大小调整：100%；-ms文本大小调整：100%；}a:焦点{轮廓：细点；}a:激活，a:悬停{轮廓：0；}h1{字体大小：2em；}缩写[标题]{边框底部：1px点；}b，强{字体大小：700；}dfn{字体样式：斜体；}标记{背景：ff0；颜色：000；}代码，kbd，pre，samp{字体系列：单空格，衬线；字体大小：1em；}预{空白：预换行；换行：断字；}q{引号：\201C\201D\2018\2019 2019；}小{字体：80%；}sup{font size:75%；line height:0；position:relative；vertical align:baseline；}sup{top:-.5em；}sub{bottom:-.25em；}img{border:0；}svg:not:root{overflow:hidden；}fieldset{border:1px纯银；margin:02px；padding:35em.625em.75em；}按钮，输入，选择，文本区{font family:inherit；字体大小：100%；margin:0；}按钮，输入{line height:normal input；}按钮，html[类型=按钮]，/*1*/
输入[type=reset]，输入[type=submit]{-webkit外观：按钮；光标：指针；}按钮[disabled]，输入[disabled]{光标：默认值；}输入[type=checkbox]，输入[type=radio]{框大小：边框框；填充：0；}输入[type=search]{-webkit外观：文本字段；-moz框大小：内容框；-webkit框大小：内容框；框大小：内容框；}输入[type=search]：：-webkit搜索取消按钮，输入[type=search]：：-webkit搜索装饰{-webkit外观：无；}文本区域{溢出：自动；垂直对齐：顶部；}表格{边框折叠：折叠；边框间距：0；}正文，图{margin:0；}图例，按钮：：-moz焦点内部，输入：：-moz焦点内部{边框：0；填充：0；}
/*框尺寸边框框*/
*{-moz框大小：边框框；-webkit框大小：边框框；框大小：边框框；}
/*一些默认样式使每个框可见*/
.盒子{
颜色：白色；
字体大小：50px；
文本对齐：居中；
文本阴影：4px4p0RGBA0,0,0,0.1；
填充：10px；
}
/*每个盒子的颜色*/
.box1{背景：1abc9c；}
.box2{背景：3498db；}
.box3{背景：9b59b6；}
.box4{背景：34495e；}
.box5{背景：f1c40f；}
.box6{背景：e67e22；}
.box7{背景：e74c3c；}
.box8{背景：bdc3c7；}
.box9{背景：2ecc71；}
.box10{背景：16a085；}
这里有一个很好的解释说明发生了什么：因为flex basis是在其他flex属性受到影响之前的初始宽度。不清楚您正在尝试做什么。为什么要使用flex basis？flex grow从0到1，它只定义flex项的增长能力。请检查：@FerranBuireu这是不正确的。flex grow根据屏幕截图10/11和1/11（在第3行中）定义每个项目应从剩余空间中获得的零件数量。