帶有環繞文字的flexbox項之間的間距相等

Question

我有一個Flexbox，其中水平放置了三個項目（div）。 我希望這些項目之間的間距相等。 但問題是，這些div中的文本易碎。

在下面的示例中，第1項和第2項之間的間距小於第2項和第3項之間的間距，因為第2項中的文本是自動換行的，而div的寬度沒有被調整。

關於如何在不打斷文字的同時實現等間距的任何建議？

（請注意，示例中的背景色是為了說明第2項偏離中心的問題）

 .outerContainer { width: 430px; } .container { display: flex; padding: 20px; background-color: tomato; } .container > div:not(:last-child) { margin-right: 20px; } .container > div { background-color: pink; word-break: break-word; display: flex; } .fig { border: 2px solid black; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-right: 5px; } 

 <div class="outerContainer"> <div class="container"> <div> <div class="fig">1</div> <div>two words</div> </div> <div> <div class="fig">2</div> <div>some we somewrap </div> </div> <div> <div class="fig">3</div> <div>some text</div> </div> </div> </div> 

Answer 1

您似乎在尋找text-align: justify 。

其他可能的解決方案暗示設計而不是代碼，例如，您用來演示問題的方式恰好是：為元素提供獨特的背景，以便它們在視覺上由實際元素大小而不是包含的文本定義。
或者給他們一個獨特的border 。

您還應該考慮word-break: break-word （它不是在同一行的單詞之間增加空格以證明文本的正確性，而是僅在可用行空間的末尾斷開單詞）。

如果這樣渲染，您是否仍可以聲明元素未均勻分布？

 .outerContainer { width: 400px; } .container { display: flex; background-color: #888; padding: 20px; } .container > * { box-shadow: 0 3px 5px -1px rgba(0,0,0,.2), 0 5px 8px 0 rgba(0,0,0,.14), 0 1px 14px 0 rgba(0,0,0,.12); padding: 20px; box-sizing: border-box; word-break: break-word; color: #666; } .container > div:not(:last-child) { margin-right: 20px; } .container > div { background-color: white; } 

 <div class="outerContainer"> <div class="container"> <div>two words</div> <div>and some short somelongword</div> <div>some text</div> </div> </div> 

---

除上述之外，您的問題的答案是： 使用CSS是不可能的 。 為了簡化您的問題以便更清楚地理解，您應該考慮每個元素只有一行（因為當存在多於一行時，問題仍然會在每一行上重復出現，而在另一行上也會重復出現）。

理想的結果是，以這樣的方式呈現這些行中的每一行，即它們的內容將通過按比例更改一個或多個文本屬性，從而將其內容擴展到任意分配的空間上，並使第一個字母與該行的最左側對齊。分配的空間，並將最右邊的字母與分配的空間的正確限制對齊。
從技術上講，您可以通過修改以下內容來實現：

1. 單詞之間的間隔（當行中有多個單詞時）
2. 字母之間的空間
3. 字體大小
4. 以上的組合

僅使用CSS，您只能使用以下方法按比例動態地修改單詞之間的間隔：

text-align: justify;
text-align-last: justify;

您還可以使用letter-spacing屬性修改字母之間的距離，還可以修改font-size但不能“動態地”修改 （以使其完全填充所需的空間）-您可以使用JavaScript即時計算此類更改但是無論您做什么，機會都不一定，一副手套不能適合所有尺寸。
經驗法則是：嘗試使其干凈自然 。

---

不考慮技術因素，並嘗試解決實際問題（ “看起來不太好” ），正確的答案是：與設計師交談。

設計師受過訓練，可以通過添加，刪除或更改普通程序員不會考慮的細節，或更確切地說，不會考慮進行這些特定更改的細節，將看起來一般的東西甚至是看起來不好的東西變成看起來很棒的東西使血腥的東西看起來那么 好 。