使用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完整指南