在樞軸上與Flexbox平衡

本文介紹了一種巧妙的Flexbox技術，用於圍繞“樞軸”點的元素，避免使用複雜的HTML或高級CSS。作者使用填字遊戲拼圖類比來說明問題：圍繞中心字母的單詞，不一定是中點。

硬編碼偏移的初始方法被認為是僵化和多餘的。取而代之的是，採用了“分歧和征服”策略。這個詞分為兩個部分：“頭”（樞軸之前）和“尾巴”（樞軸和之後）。

核心解決方案利用Flexbox的order屬性來扭轉頭部和尾巴的順序。 CSS樣式然後操縱定位：

• margin-right: auto將頭推向右側。
• position: relative ， left: 50%和right: 50%用於將樞軸圍繞頭部和尾部完美居中。

這是簡潔的CSS解決方案：

 。容器 {
  顯示：Flex;
}
.Item：最後一個孩子{
  邊緣權利：自動；
}
。物品 {
  訂單：2;
  位置：相對；
  右：50％；
}
.pivot，.pivot〜 .Item {
  訂單：1;
  左：50％；
}

通過將flex-direction更改為column ，此方法可以適應垂直佈局。它也比將頭和尾部包裹在單獨的容器中更有效。重要的是，這種方法保持語義HTML順序，以確保屏幕讀取器的可訪問性。

作者結束時強調了這項編碼挑戰與更廣泛的平衡行為開發人員在尋找最佳解決方案時面對的相似之處。提供了一個codepen示例，以進行實際演示。

以上是在樞軸上與Flexbox平衡的詳細內容。更多資訊請關注PHP中文網其他相關文章！