html – flex-basis和box-sizing

概述根据 flex-basis MDN documentation,flex-basis属性计算与内容框相关的d性项的大小,除非box-sizing CSS属性定义了不同的选项.但是我在目前的Chrome和IE11中都没有得到理想的结果. 我写了两个例子： .horizontal-layout { display: flex; flex-direction: row;}header > s 根据 flex-basis MDN documentation,flex-basis属性计算与内容框相关的d性项的大小,除非Box-sizing CSS属性定义了不同的选项.但是我在目前的Chrome和IE11中都没有得到理想的结果.

我写了两个例子：

.horizontal-layout {  display: flex;  flex-direction: row;}header > span {  flex: 1 1 100%;}header > .button {  background-color: grey;}header > .app-name {  background-color: orange;}header#with-border-padding > span {  Box-sizing: border-Box; /* this is not useful at all */}header#with-border-padding > .button {  border: 1px solID black;  padding-left: 5px;}

<header >  <span >A</span>  <span >B</span>  <span >C</span></header><header ID="with-border-padding" >  <span >A</span>  <span >B</span>  <span >C</span></header>

jsfiddle

>第一个例子是< header> 3< span>每个具有flex的标签：1 1 100％(flex-basis是100％).所以每个跨度都给出了标题的第三部分.
>第二个示例等于第一个示例,但在这种情况下,第二个示例有一些边框和一些填充.我认为flex-grow与第一个例子的结果相同,但事实并非如此.然后我看到了flex-basis MDN documentation并且明白我必须设置盒子尺寸：边框盒子;到flex项目,以便flex-basis与border-Box相关.但它也没有！谁知道为什么？

所以,谢谢有人可以澄清第二个例子的问题.
在我的代码中,您可以轻松地比较< span>的大小.两个例子之间的标签.

解决方法 所以很明显,两行中的列不对齐：

.horizontal-layout {  display: flex;  flex-direction: row;}header > span {  flex: 1 1 100%;}header > .button {  background-color: grey;}header > .app-name {  background-color: orange;}header#with-border-padding > span {  Box-sizing: border-Box;}header#with-border-padding > .button {  border: 1px solID black;  padding-left: 5px;}

<header >  <span >A</span>  <span >B</span>  <span >C</span></header><header ID="with-border-padding" >  <span >A</span>  <span >B</span>  <span >C</span></header>

有几种方法可以解决这个问题,它们涉及柔性基础和盒子大小,以及柔性收缩和填充.

例如,如果禁用flex-shrink,则对齐问题就会消失.

.horizontal-layout {  display: flex;  flex-direction: row;}header > span {  flex: 1 0 100%; /* adjustment */}header > .button {  background-color: grey;}header > .app-name {  background-color: orange;}header#with-border-padding > span {  Box-sizing: border-Box;}header#with-border-padding > .button {  border: 1px solID black;  padding-left: 5px;}

<header >  <span >A</span>  <span >B</span>  <span >C</span></header><header ID="with-border-padding" >  <span >A</span>  <span >B</span>  <span >C</span></header>

同样,如果删除填充,则对齐问题也会得到修复.

.horizontal-layout {  display: flex;  flex-direction: row;}header > span {  flex: 1 1 100%;}header > .button {  background-color: grey;}header > .app-name {  background-color: orange;}header#with-border-padding > span {  Box-sizing: border-Box;}header#with-border-padding > .button {  border: 1px solID black;  /* padding-left: 5px; */  /* adjustment */}

<header >  <span >A</span>  <span >B</span>  <span >C</span></header><header ID="with-border-padding" >  <span >A</span>  <span >B</span>  <span >C</span></header>

基于flex-basis,flex-shrink,padding和border-Box交互以建立盒子大小的方式涉及一些相对复杂的计算.他们在这里解释：

> How does flex-shrink factor in padding and border-box?

该问题的简单解决方案是：

header > span { flex: 1 0 7px; }

.horizontal-layout {  display: flex;  flex-direction: row;}header > span {  flex: 1 0 7px; /* adjustment */}header > .button {  background-color: grey;}header > .app-name {  background-color: orange;}header#with-border-padding > span {  Box-sizing: border-Box;}header#with-border-padding > .button {  border: 1px solID black;  padding-left: 5px;}

<header >  <span >A</span>  <span >B</span>  <span >C</span></header><header ID="with-border-padding" >  <span >A</span>  <span >B</span>  <span >C</span></header>

使用flex-grow：1以flex速记定义,不需要flex-basis为100％.每个项目将在线路上获得相等的可用空间份额.但是,flex-basis必须至少足够大,以吸收来自Box-sizing的填充和边框：border-Box(在这种情况下为7px).这些列现在跨行对齐.

总结

以上是内存溢出为你收集整理的html – flex-basis和box-sizing全部内容，希望文章能够帮你解决html – flex-basis和box-sizing所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。