隨州網(wǎng)站建設(shè),成都戶外網(wǎng)站建設(shè),免費(fèi)的行情網(wǎng)站下載安裝,在網(wǎng)站中添加搜索引擎一篇文章掌握 Flexbox 布局的所有常用操作 #x1f4da; 目錄 基礎(chǔ)概念容器屬性子元素屬性常見(jiàn)布局場(chǎng)景實(shí)戰(zhàn)技巧最佳實(shí)踐 基礎(chǔ)概念 什么是 Flexbox#xff1f; Flexbox#xff08;彈性盒子布局#xff09;是 CSS3 引入的一種一維布局模型#xff0c;用于在容器中分配空…一篇文章掌握 Flexbox 布局的所有常用操作 目錄基礎(chǔ)概念容器屬性子元素屬性常見(jiàn)布局場(chǎng)景實(shí)戰(zhàn)技巧最佳實(shí)踐基礎(chǔ)概念什么是 FlexboxFlexbox彈性盒子布局是 CSS3 引入的一種一維布局模型用于在容器中分配空間和對(duì)齊項(xiàng)目。核心概念┌──────────────────────────────────────┐ ← flex container容器 │ 主軸起點(diǎn) 主軸終點(diǎn) │ │ ↓ ↓ │ │ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ │ ← flex items子項(xiàng) │ │ 1 │ │ 2 │ │ 3 │ │ 4 │ │ │ └─────┘ └─────┘ └─────┘ └─────┘ │ │ ←────────── 主軸main axis────→ │ │ ↑ │ │ 交叉軸cross axis │ └──────────────────────────────────────┘關(guān)鍵術(shù)語(yǔ)Flex Container容器設(shè)置了display: flex的父元素Flex Items子項(xiàng)容器的直接子元素主軸Main Axis默認(rèn)水平方向由flex-direction決定交叉軸Cross Axis垂直于主軸的方向容器屬性1.display: flex啟用 Flexbox 布局.container{display:flex;/* 塊級(jí) flex 容器 *//* 或 */display:inline-flex;/* 行內(nèi) flex 容器 */}2.flex-direction定義主軸方向.container{flex-direction:row;/* 默認(rèn)水平從左到右 */flex-direction:row-reverse;/* 水平從右到左 */flex-direction:column;/* 垂直從上到下 */flex-direction:column-reverse;/* 垂直從下到上 */}可視化row: [1] [2] [3] [4] → row-reverse: ← [4] [3] [2] [1] column: [1] [2] [3] [4] ↓ column-reverse: ↑ [4] [3] [2] [1]3.justify-content主軸對(duì)齊方式水平對(duì)齊當(dāng) flex-direction 為 row 時(shí).container{justify-content:flex-start;/* 默認(rèn)起點(diǎn)對(duì)齊 */justify-content:flex-end;/* 終點(diǎn)對(duì)齊 */justify-content:center;/* 居中對(duì)齊 */justify-content:space-between;/* 兩端對(duì)齊項(xiàng)目間距相等 */justify-content:space-around;/* 每個(gè)項(xiàng)目?jī)蓚?cè)間距相等 */justify-content:space-evenly;/* 所有間距完全相等 */}可視化flex-start: [1] [2] [3] | flex-end: [1] [2] [3] | center: [1] [2] [3] | space-between: [1] [2] [3] | space-around: [1] [2] [3] | space-evenly: [1] [2] [3] |4.align-items交叉軸對(duì)齊方式垂直對(duì)齊當(dāng) flex-direction 為 row 時(shí).container{align-items:stretch;/* 默認(rèn)拉伸填充 */align-items:flex-start;/* 起點(diǎn)對(duì)齊 */align-items:flex-end;/* 終點(diǎn)對(duì)齊 */align-items:center;/* 居中對(duì)齊 */align-items:baseline;/* 基線對(duì)齊 */}可視化stretch: ┌─────┐ ┌─────┐ ┌─────┐ │ 1 │ │ 2 │ │ 3 │ │ │ │ │ │ │ └─────┘ └─────┘ └─────┘ flex-start: ┌─────┐ ┌─────┐ ┌─────┐ │ 1 │ │ 2 │ │ 3 │ └─────┘ └─────┘ └─────┘ center: ┌─────┐ ┌─────┐ ┌─────┐ │ 1 │ │ 2 │ │ 3 │ └─────┘ └─────┘ └─────┘ flex-end: ┌─────┐ ┌─────┐ ┌─────┐ │ 1 │ │ 2 │ │ 3 │ └─────┘ └─────┘ └─────┘5.flex-wrap是否換行.container{flex-wrap:nowrap;/* 默認(rèn)不換行 */flex-wrap:wrap;/* 換行第一行在上 */flex-wrap:wrap-reverse;/* 換行第一行在下 */}可視化nowrap: [1] [2] [3] [4] [5] [6] →可能溢出 wrap: [1] [2] [3] [4] [5] [6] wrap-reverse: [5] [6] [1] [2] [3] [4]6.align-content多行對(duì)齊方式僅在有多行時(shí)生效.container{flex-wrap:wrap;/* 必須先設(shè)置換行 */align-content:stretch;/* 默認(rèn)拉伸 */align-content:flex-start;/* 起點(diǎn)對(duì)齊 */align-content:flex-end;/* 終點(diǎn)對(duì)齊 */align-content:center;/* 居中 */align-content:space-between;/* 兩端對(duì)齊 */align-content:space-around;/* 間距相等 */}7.gap現(xiàn)代屬性設(shè)置子項(xiàng)間距.container{display:flex;gap:20px;/* 所有方向 *//* 或 */row-gap:20px;/* 行間距 */column-gap:10px;/* 列間距 */}子元素屬性1.flex-grow放大比例如何分配剩余空間.item{flex-grow:0;/* 默認(rèn)不放大 */flex-grow:1;/* 平分剩余空間 */flex-grow:2;/* 獲得 2 倍空間 */}示例.item1{flex-grow:1;}/* 占 1 份 */.item2{flex-grow:2;}/* 占 2 份 */.item3{flex-grow:1;}/* 占 1 份 */┌──────────────────────────────────────┐ │ [item1] │ [item2──────] │ [item3] │ │ 25% │ 50% │ 25% │ └──────────────────────────────────────┘2.flex-shrink縮小比例空間不足時(shí)如何收縮.item{flex-shrink:1;/* 默認(rèn)會(huì)收縮 */flex-shrink:0;/* 不收縮 */flex-shrink:2;/* 2 倍收縮速度 */}3.flex-basis項(xiàng)目的基礎(chǔ)大小.item{flex-basis:auto;/* 默認(rèn)根據(jù)內(nèi)容 */flex-basis:200px;/* 固定寬度 */flex-basis:30%;/* 百分比 */}4.flex簡(jiǎn)寫屬性?最常用的簡(jiǎn)寫.item{/* flex: flex-grow flex-shrink flex-basis */flex:0 1 auto;/* 默認(rèn)值 */flex:1;/* flex: 1 1 0% */flex:auto;/* flex: 1 1 auto */flex:none;/* flex: 0 0 auto */}常用值/* 自動(dòng)填充剩余空間 */.item{flex:1;}/* 固定寬度不收縮不放大 */.item{flex:0 0 200px;}/* 根據(jù)內(nèi)容可放大可縮小 */.item{flex:auto;}5.align-self單個(gè)項(xiàng)目的對(duì)齊方式覆蓋 align-items.item{align-self:auto;/* 默認(rèn)繼承 align-items */align-self:flex-start;align-self:flex-end;align-self:center;align-self:baseline;align-self:stretch;}6.order改變項(xiàng)目排列順序.item{order:0;/* 默認(rèn) */order:-1;/* 提前 */order:1;/* 延后 */}示例.item1{order:2;}.item2{order:1;}.item3{order:3;}HTML: [1] [2] [3] 顯示: [2] [1] [3]常見(jiàn)布局場(chǎng)景1. 水平垂直居中 ???.container{display:flex;justify-content:center;/* 水平居中 */align-items:center;/* 垂直居中 */height:100vh;/* 容器高度 */}divclasscontainerdivclasscentered-item完美居中/div/div2. 兩端對(duì)齊布局.header{display:flex;align-items:center;justify-content:space-between;}divclassheaderdivclasslogoLogo/divnavclassmenuMenu/nav/div┌───────────────────────────────────┐ │ [Logo] [Menu] │ └───────────────────────────────────┘3. 左側(cè)固定右側(cè)自適應(yīng).layout{display:flex;}.sidebar{flex:0 0 250px;/* 固定寬度 250px */}.content{flex:1;/* 占滿剩余空間 */}divclasslayoutasideclasssidebar側(cè)邊欄/asidemainclasscontent主內(nèi)容/main/div┌─────────┬──────────────────────────┐ │ Sidebar │ Content (自適應(yīng)) │ │ 250px │ │ └─────────┴──────────────────────────┘4. 等分布局.grid{display:flex;gap:20px;}.grid-item{flex:1;/* 每個(gè)子項(xiàng)等寬 */}divclassgriddivclassgrid-item1/divdivclassgrid-item2/divdivclassgrid-item3/div/div┌──────────┬──────────┬──────────┐ │ 1 │ 2 │ 3 │ └──────────┴──────────┴──────────┘5. 圣杯布局Holy Grail.container{display:flex;flex-direction:column;min-height:100vh;}.header, .footer{flex:0 0 auto;}.main{flex:1;display:flex;}.sidebar{flex:0 0 200px;}.content{flex:1;}divclasscontainerheaderclassheaderHeader/headerdivclassmainasideclasssidebarSidebar/asidemainclasscontentContent/main/divfooterclassfooterFooter/footer/div┌──────────────────────────┐ │ Header │ ├────────┬─────────────────┤ │ Side │ Content │ │ bar │ (自適應(yīng)高度) │ ├────────┴─────────────────┤ │ Footer │ └──────────────────────────┘6. 卡片網(wǎng)格布局.card-grid{display:flex;flex-wrap:wrap;gap:20px;}.card{flex:0 0calc(33.333% - 14px);/* 3 列 */}/* 響應(yīng)式 */media(max-width:768px){.card{flex:0 0calc(50% - 10px);/* 2 列 */}}media(max-width:480px){.card{flex:0 0 100%;/* 1 列 */}}7. 底部固定布局.container{display:flex;flex-direction:column;min-height:100vh;}.content{flex:1;/* 內(nèi)容區(qū)自動(dòng)填充 */}.footer{flex:0 0 auto;}┌──────────────────────────┐ │ Content │ │ │ │ (自動(dòng)擴(kuò)展) │ │ │ ├──────────────────────────┤ │ Footer │ ← 始終在底部 └──────────────────────────┘8. 導(dǎo)航欄布局.navbar{display:flex;align-items:center;padding:0 20px;}.logo{margin-right:auto;/* Logo 左側(cè)其他右側(cè) */}.nav-links{display:flex;gap:20px;}navclassnavbardivclasslogoLogo/divulclassnav-linksliHome/liliAbout/liliContact/li/ulbuttonclassloginLogin/button/nav┌─────────────────────────────────────────┐ │ [Logo] [Home][About][Contact][Login] │ └─────────────────────────────────────────┘實(shí)戰(zhàn)技巧1. Auto Margin 技巧 ???在 Flexbox 中margin: auto可以消耗所有剩余空間推送到右側(cè).container{display:flex;}.item-left{/* 正常布局 */}.item-right{margin-left:auto;/* 推到最右邊 */}divclasscontainerdivclassitem-leftLeft/divdivclassitem-rightRight/div/div┌─────────────────────────────────────┐ │ [Left] [Right] │ └─────────────────────────────────────┘水平垂直居中單個(gè)元素.container{display:flex;}.centered{margin:auto;/* 完美居中 */}2. 最后一行左對(duì)齊問(wèn)題使用justify-content: space-between時(shí)最后一行會(huì)兩端對(duì)齊/* 方法 1添加空白占位符 */.grid::after{content:;flex:auto;}/* 方法 2使用 gap 代替 justify-content */.grid{display:flex;flex-wrap:wrap;gap:20px;}.item{flex:0 0calc(33.333% - 14px);}3. 溢出滾動(dòng).container{display:flex;overflow-x:auto;/* 水平滾動(dòng) */}.item{flex:0 0 200px;/* 固定寬度不收縮 */}4. 反轉(zhuǎn)布局/* HTML 順序A B C *//* 顯示順序C B A */.container{display:flex;flex-direction:row-reverse;}/* 或使用 order */.item-a{order:3;}.item-b{order:2;}.item-c{order:1;}5. 垂直居中多行文本.container{display:flex;align-items:center;min-height:200px;}.text{/* 多行文本也會(huì)垂直居中 */}6. 按鈕組布局.button-group{display:flex;gap:10px;}/* 左對(duì)齊 */.button-group.left{justify-content:flex-start;}/* 右對(duì)齊 */.button-group.right{justify-content:flex-end;}/* 居中 */.button-group.center{justify-content:center;}7. 固定比例布局/* 比例 2:3:1 */.item1{flex:2;}.item2{flex:3;}.item3{flex:1;}┌────┬─────────┬───┐ │ 2 │ 3 │ 1 │ └────┴─────────┴───┘8. 響應(yīng)式導(dǎo)航.nav{display:flex;gap:20px;}media(max-width:768px){.nav{flex-direction:column;/* 垂直排列 */}}最佳實(shí)踐1. ? 優(yōu)先使用flex簡(jiǎn)寫/* ? 不推薦 */.item{flex-grow:1;flex-shrink:1;flex-basis:0%;}/* ? 推薦 */.item{flex:1;}2. ? 使用gap代替margin/* ? 老方法 */.container{display:flex;}.item{margin-right:20px;}.item:last-child{margin-right:0;}/* ? 新方法 */.container{display:flex;gap:20px;}3. ? 避免不必要的嵌套/* ? 過(guò)度嵌套 */.outer{display:flex;}.middle{display:flex;flex:1;}.inner{display:flex;}/* ? 扁平化 */.container{display:flex;}4. ? 使用min-width: 0解決文本溢出/* 問(wèn)題flex item 中長(zhǎng)文本不換行 */.item{flex:1;min-width:0;/* 允許收縮到 0 */}.text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}5. ? 考慮瀏覽器兼容性/* 添加前綴現(xiàn)代構(gòu)建工具會(huì)自動(dòng)處理 */.container{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}6. ? 合理使用align-itemsvsalign-content/* 單行對(duì)齊用 align-items */.container{display:flex;align-items:center;}/* 多行對(duì)齊用 align-content */.container{display:flex;flex-wrap:wrap;align-content:center;}7. ? 防止內(nèi)容撐大容器.container{display:flex;}.item{flex:1;min-width:0;/* 允許收縮 */overflow:hidden;/* 裁剪溢出 */}快速參考表容器屬性速查屬性作用常用值display啟用 Flexboxflex,inline-flexflex-direction主軸方向row,columnjustify-content主軸對(duì)齊center,space-betweenalign-items交叉軸對(duì)齊center,stretchflex-wrap是否換行wrap,nowrapgap間距20px,1rem子元素屬性速查屬性作用常用值flex縮放比例1,0 0 200pxalign-self單獨(dú)對(duì)齊center,flex-startorder排列順序0,-1,1常用組合速查場(chǎng)景CSS水平垂直居中display: flex; justify-content: center; align-items: center;兩端對(duì)齊display: flex; justify-content: space-between;等分布局display: flex; .item { flex: 1; }固定自適應(yīng).fixed { flex: 0 0 200px; } .auto { flex: 1; }底部固定display: flex; flex-direction: column; .content { flex: 1; }在線工具推薦Flexbox Playgroundhttps://codepen.io/enxaneta/pen/adLPwv交互式學(xué)習(xí) FlexboxFlexbox Froggyhttps://flexboxfroggy.com/游戲化學(xué)習(xí)CSS Tricks Guidehttps://css-tricks.com/snippets/css/a-guide-to-flexbox/完整參考文檔Flexbox Defensehttp://www.flexboxdefense.com/塔防游戲?qū)W習(xí)總結(jié)記住這 3 個(gè)核心概念display: flex- 啟用 Flexbox主軸對(duì)齊-justify-content水平交叉軸對(duì)齊-align-items垂直記住這 2 個(gè)常用技巧flex: 1- 自動(dòng)填充空間margin: auto- 推送元素到邊緣記住這 1 個(gè)黃金法則先理解主軸和交叉軸90% 的布局問(wèn)題都能解決實(shí)戰(zhàn)練習(xí)試著用 Flexbox 實(shí)現(xiàn)以下布局? 登錄頁(yè)面垂直水平居中的表單? 導(dǎo)航欄Logo 左側(cè)菜單右側(cè)? 卡片列表3 列響應(yīng)式網(wǎng)格? 個(gè)人中心頁(yè)左側(cè)導(dǎo)航右側(cè)內(nèi)容? 移動(dòng)端底部標(biāo)簽欄參考資源MDN Flexbox 文檔W3C Flexbox 規(guī)范Can I Use - Flexbox