首頁 > web前端 > css教學 > 如何建立具有固定寬度側列和靈活中心列的三列 Flexbox 佈局?

如何建立具有固定寬度側列和靈活中心列的三列 Flexbox 佈局?

Barbara Streisand
發布: 2024-12-07 16:12:15
原創
732 人瀏覽過

How Can I Create a Three-Column Flexbox Layout with Fixed-Width Side Columns and a Flexible Center Column?

維護具有靈活中心的固定寬度列

您正在尋求設計一個具有三列的Flexbox 佈局,其中左列和右列保持固定寬度,而中心列擴展以佔據剩餘空間。儘管設定了列的尺寸,但它們會隨著視窗大小的調整而收縮。

解決方案

要實現所需的佈局,請將width 屬性替換為以下flex 規範對於固定寬度的列:

flex: 0 0 230px;
登入後複製

此規範表示:

  • 0 表示flex-grow:不展開列。
  • 0 表示 flex-shrink:不壓縮列。
  • 230px 表示 flex -basis:設定初始寬度為230px。

本質上,這個配置確保了無論視窗大小如何,列都保持在 230px。

附加功能

關於根據用戶交互隱藏右側列同時保持固定寬度的附加要求左列並相應地擴展中心列,您可以合併以下內容:

.column.center {
  flex: 1 0 calc(100% - 230px);
}
登入後複製

此修改確保當右列列被隱藏,中心列填滿剩餘空間,而左列保持固定在230px。

以上是如何建立具有固定寬度側列和靈活中心列的三列 Flexbox 佈局?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板