使用 flex 實現 5 種常用布局

2022-01-13 04:38:50 字數 1181 閱讀 3279

經典的上-中-下布局。

當頁面內容高度小於可視區域高度時,footer 吸附在底部;當頁面內容高度大於可視區域高度時,footer 被撐開排在 content 下方

demo link

header

content

footer

body 

article

在上-中-下布局的基礎上,加了左側定寬 sidebar。

demo link

header

aside

content

footer

body 

.content

.content article

左邊是定寬 sidebar,右邊是上-中-下布局。

demo link

aside

header

content

footer

body 

aside

.content

.content article

還是上-中-下布局,區別是 header 固定在頂部,不會隨著頁面滾動。

demo link

header

content

footer

body 

header

article

左側 sidebar 固定在左側且與視窗同高,當內容超出視窗高度時,在 sidebar 內部出現滾動條。左右兩側滾動條互相獨立。

demo link

aside

item

item

item

header

content

footer

body 

aside

.content

.content article

本文**於:猿2048

CSS常用布局實現方法

css 布局對我來說,既熟悉又陌生。我既能實現它,又沒有很好的了解它。所以想總結一下,梳理一下 css 中常用的一列,兩列,三列布局等的實現方法。本文小白,僅供參考。但也要了解下浮動,定位等。一 一列布局 1.居中定寬 這算是最簡單且最容易實現的布局了吧。列出最核心的 css body head,m...

四種常用布局方式

css四種常用布局方式 常用的四種方式有display,浮動布局,定位布局和伸縮盒布局。1.display布局方式 其中display屬性有三個屬性值,分別為inline,block,inline block。display inline 將塊級元素轉變為行內元素 display block 將行內...

Android介面五種常用布局方式

android介面五種常用布局方式 android 的介面由布局和元件協同完成,布局相當於整體框架,而元件則是框架裡面的內容。元件按布局方式一次排列,就組成了使用者所能看見的介面。android 的五大布局分別是 linearlayout 線性布局 framelayout 單幀布局 relative...