我想使用具有一些宽度相同的项目的flexbox.我注意到flexbox会均匀地分布空间,而不是空间本身.
例如:
.header {
display: flex;
}
.item {
flex-grow: 1;
text-align: center;
border: 1px solid black;
}<div class="header">
<div class="item">asdfasdfasdfasdfasdfasdf</div>
<div class="item">z</div>
</div>第一项比第二项大很多.如果我有3个项目,4个项目或n个项目,我希望它们全部出现在同一行,每个项目的空间量相等.
有任何想法吗？
有没有办法在css calc函数中使用或实现模运算符？
我知道有mod运算符和IE支持它,但其他浏览器呢？
例如
#element-id{
width: calc( 100% mod 5 );
}
标题说明了一切。
我想知道，这是我在calc()算术中可以在 CSS 中使用的最大数字。
它与 JavaScript 中的最大数字相同吗？
当我尝试使用转换时，限制似乎是 1e39（在 Chrome 和 for 中transform: translateX()）
div span {
display: block;
width: 100px;
height: 100px;
background-color: gold;
}
div:nth-child(1) span {
-webkit-transform: translatex(calc(1e38px * 1e-37));
transform: translatex(calc(1e38px * 1e-37));
}
div:nth-child(2) span {
-webkit-transform: translatex(calc(1e39px * 1e-37));
transform: translatex(calc(1e39px * 1e-37));
}
div:nth-child(3) span {
-webkit-transform: translatex(calc(1e40px * 1e-37));
transform: translatex(calc(1e40px * 1e-37));
}<div>
<code>transform: translatex(calc(1e38px * 1e-37));</code>
<span></span>
</div>
<div>
<code>transform: translatex(calc(1e39px * 1e-37));</code>
<span></span>
</div> …