欧美一区二区高清在线观看_成人av免费电影_国产精品一区二区免费看_欧美激情第六页_欧美人xxxxx_日本不卡一区二区三区在线观看_香蕉久久夜色_精品一区二区日本_久久五月天婷婷_日本亚洲导航

這些布局方法都是網站制作過程中常用的技術，也是目前前端布局的絕對主流和首選方案。

1. Flexbox（彈性盒子布局）

設計初衷：為一維布局（沿直線或曲線排布）提供更高效、靈活的方式。非常適合組件、導航欄等線性結構的布局。

核心概念：

• 容器：設置了 display: flex; 的元素。

• 項目：容器內的直接子元素。

容器常用屬性：

• flex-direction：定義主軸方向（row | row-reverse | column | column-reverse）。

• justify-content：定義項目在主軸上的對齊方式（flex-start | flex-end | center | space-between | space-around | space-evenly）。

• align-items：定義項目在交叉軸上的對齊方式（stretch | flex-start | flex-end | center | baseline）。

• flex-wrap：定義是否換行（nowrap | wrap | wrap-reverse）。

項目常用屬性：

• flex-grow：定義項目的放大比例。

• flex-shrink：定義項目的縮小比例。

• flex-basis：定義項目在分配多余空間之前的默認大小。

• align-self：允許單個項目有與其他項目不一樣的對齊方式。

.container {  

display: flex;  

justify-content: center; /* 水平居中 */  

align-items: center;     /* 垂直居中 */  

height: 300px;}

.item { flex: 1; } /* 每個項目平均分配空間 */

2. CSS Grid（網格布局）

設計初衷：為二維布局（同時定義行和列）而設計。非常適合整個頁面的宏觀布局，如雜志、儀表盤等復雜結構。

核心概念：

• 容器：設置了 display: grid; 的元素。

• 項目：容器內的直接子元素。

• 網格線：劃分網格的線。

• 軌道：相鄰網格線之間的空間（行或列）。

• 單元格：相鄰行線和列線相交的區(qū)域。

容器常用屬性：

• grid-template-columns / grid-template-rows：定義列和行的尺寸。

• grid-template-areas：通過命名區(qū)域來定義布局模板。

• gap（或 grid-gap）：設置網格項之間的間距。

• justify-items / align-items：設置網格項在單元格內的水平/垂直對齊方式。

• justify-content / align-content：設置整個網格在容器內的水平/垂直對齊方式。

項目常用屬性：

• grid-column-start / grid-column-end / grid-row-start / grid-row-end：指定項目占據的網格區(qū)域。

• grid-area：簡寫屬性，或指定項目放在哪個命名區(qū)域。

.container {  

display: grid; 

grid-template-columns: 1fr 2fr 1fr; /* 三列，中間列是兩側的兩倍 */  

grid-template-rows: 100px auto 100px;  

gap: 10px; 

grid-template-areas:    "header header header"    

"sidebar main ads"   

 "footer footer footer";}

.header { grid-area: header; }

.sidebar { grid-area: sidebar; }

.main { grid-area: main; }

.ads { grid-area: ads; }

.footer { grid-area: footer; }