使用flex-basis时遇到麻烦

Question

我不确定我是不是正确理解了flexbox模型，或者我是否错误地使用了它。

我有一个简单的重复HTML块：

<div class="row">
    <span class="label">Label:</span>
    <span class="value">{{session.value}}</span>
</div>

我的目标是让每个标签具有相同的宽度，并且具有占据剩余空间的值。 通常情况下，我会使用漂浮物或一些技巧，但我决定尝试使用flexbox。

我试过的CSS很简单：

.row {
    display: flex;
}

.label {
    width: 150px;
    flex-basis: auto;
    font-weight: bold;
}

我也尝试过flex-basis: 150px 。 不幸的是，正在发生的事情是当我在单行中获得单行时，内容的值是多行的，标签会挤入可用的最小空间。 我的印象是加入flex-basis设置flex容器的宽度，然后其他容器适合剩余的空间，基于它们的flex增长/收缩？ 我不理解flexbox或没有正确使用它？

Answer 1

你可以：

1. 将flex-grow和flex-shrink为0 ，并将flex-basis为150px 。
2. 将flex-grow和flex-shrink为1 ，并将flex-basis为100% 。
3. 使用速记flex属性。

 .row { display: flex; } .label { flex: 0 0 150px; font-weight: bold; } .value { flex: 0 1 100%; } 

 <div class="row"> <span class="label">Label 1:</span> <span class="value">{{session.value1}}</span> </div> <div class="row"> <span class="label">Label 2:</span> <span class="value">{{session.value2}}</span> </div> <div class="row"> <span class="label">Label 3:</span> <span class="value">{{session.value3}}</span> </div> 

请注意， flex-grow: 0和flex-shink: 1是大多数浏览器的默认值，您只能使用flex-basis属性，但某些旧浏览器有一些细微差别， 例如 ：

Internet Explorer 10使用0而不是1作为flex-shrink属性的初始值。 解决方法是始终为flex-shrink设置显式值。

这就是为什么我更喜欢使用flex属性的显式值。

Answer 2

对于具有弹性方向row （默认）的弹性项目，使用flex-basis而不是width ，何时定义固定宽度。

所以对于.label来说

.label {
    flex-basis: 150px;
    font-weight: bold;
}

现在，为了使.value占用剩余的空间，你使用flex-grow ，并且由于默认值是0 ，并且通过给.value一个1 ， .value将占用剩余空间的1个部分，而.label 0部分因此.value将填补其余部分。

.value {
    flex-grow: 1;
}

在空间不足的情况下，第三个属性flex-shrink （默认为1 ）将允许.label缩小。

堆栈代码段

 .row { display: flex; } .label { flex-basis: 150px; font-weight: bold; } .value { flex-grow: 1; } /* styling for this demo */ .row > span { border: 1px dotted lightgray; } 

 <div class="row"> <span class="label">Label:</span> <span class="value">{{session.value}}</span> </div> 

---

如果您不希望.label缩小超出其flex-basis ，请将其flex-shrink设置为0

 .row { display: flex; } .label { flex-basis: 150px; flex-shrink: 0; font-weight: bold; } .value { flex-grow: 1; } /* styling for this demo */ .row > span { border: 1px dotted lightgray; } 

 <div class="row"> <span class="label">Label:</span> <span class="value">{{session.value}}</span> </div> 

---

使用简写版本flex: <flex-grow> <flex-shrink> <flex-basis>的第二个样本flex: <flex-grow> <flex-shrink> <flex-basis>

 .row { display: flex; } .label { flex: 0 0 150px; font-weight: bold; } .value { flex: 1 1 auto; } /* styling for this demo */ .row > span { border: 1px dotted lightgray; } 

 <div class="row"> <span class="label">Label:</span> <span class="value">{{session.value}}</span> </div> 

---

这是一篇很棒的文章，介绍如何使用Flexbox。 它还包括前缀属性和“旧”，“tweener”和“新”版本。

• Flexbox完整指南