今天,我想和大家分享一個關于CSS彈性布局的小案例。
首先,我先使用HTML編寫了一個比較簡單的布局,包含一個header、一個main、一個nav和一個footer。
```htmlHEADER SECTION ```
在這個布局中,我想讓header和footer寬度固定,而main會根據屏幕大小自適應,并且nav和section寬度相等,占據剩余的空間。
于是,我選擇使用flexbox布局來實現這個效果。
首先,我給整個頁面添加一個容器,方便對布局進行控制。
```htmlHEADER SECTION ```
然后,我在CSS中增加如下的代碼:
```css
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
main {
flex: 1;
display: flex;
}
nav, section {
flex: 1;
}
```
其中,`display: flex;`讓容器成為一個flex容器;`flex-direction: column;`將子元素排列為垂直方向;`height: 100vh;`設置容器高度為100%。
在main元素中,`flex: 1;`將其設為可變寬度,并占據剩余的空間。而nav和section元素,同樣使用`flex: 1;`,讓它們等分main的剩余空間。
最后,我們可以看到,這個布局實現了我們想要的效果。
預覽效果如下:
![css彈性布局小案例預覽圖](https://cdn.xiaoxiaohappy.com/blogs/20210811/css-flex-small-case.png)
結尾,以上是本次關于CSS彈性布局的小案例分享,供大家參考。
上一篇css 3 圖片切換
下一篇css 360兼容性問題