分享 10 個常見的 CSS 頁面布局代碼片段

大家好，本篇文章將分享我們業(yè)務(wù)中很常見的10個頁面布局代碼片段，這10 種頁面布局很常見，實現(xiàn)方式也有很多種，本篇文章將用最簡單的新方式進(jìn)行實現(xiàn)，希望對大家有所啟發(fā)。

1、Card layout（卡片布局）

如下圖所示，卡片布局是我們常見的一種頁面布局。

HTML部分

<div?class="cards">
????
????<div?class="cards__item">
????????...
????div>

????
????...
div>

CSS部分

.cards?{
????display:?flex;
????/*?超出容器寬度自動換行?*/
????flex-wrap:?wrap;
????margin-left:?-8px;
????margin-right:?-8px;
}

.cards__item?{
????/*?初始化每個卡片的寬度，占據(jù)父容器的?1/4?*/
????flex-basis:?25%;
????padding-left:?8px;
????padding-right:?8px;
}

2、Holy grail（圣杯布局）

圣杯布局，不用我多說，想必每個前端人都做過這樣的頁面結(jié)構(gòu)，如下圖所示

HTML部分

<div?class="container">

????<header>
????????...
????header>
????<main?class="container__main">
????????
????????<aside?class="container__left">...aside>

????????
????????<article?class="container__middle">...article>

????????
????????<nav?class="container__right">...nav>
????main>

????<footer>
????????...
????footer>
div>

CSS部分

.container?{
????display:?flex;
????flex-direction:?column;
}

.container__main?{
????/*?占據(jù)剩余的高度部分?*/
????flex-grow:?1;
????/*?左中右使用彈性盒子布局，行方式顯示?*/
????display:?flex;
????flex-direction:?row;
}

.container__left?{
????width:?25%;
}

.container__middle?{
????/*?自動占據(jù)剩余的寬度部分?*/
????flex-grow:?1;
}

.container__right?{
????width:?20%;
}

3、Masonry grid（簡單的瀑布流）

瀑布流也是一種很常見的布局，尤其是在圖片信息流的產(chǎn)品，以往如果要完美的實現(xiàn)瀑布流，我們需要費(fèi)不少的功夫，還要借助JS進(jìn)行實現(xiàn)。本案例，將使用 column-count 這個屬性，進(jìn)行實現(xiàn)。

HTML部分

<div?class="masonry-grid">
????
????<div?class="masonry-grid__item">...div>

????
div>

CSS部分

.masonry-grid?{
????/*?三個單元格?*/
????column-count:?3;

????/*?每個單元格的距離?*/
????column-gap:?1rem;

????/*?容器寬度?*/
????width:?100%;
}

.masonry-grid__item?{
????/*?不允許內(nèi)容溢出到其他單元格?*/
????break-inside:?avoid;
????margin-bottom:?1rem;
}

4、Same height columns（相同高度的列）

布局相同高度的列，也是我們業(yè)務(wù)中常見的需求，如下圖所示：

HTML部分

<div?class="container">
????
????<div?class="container__column">
????????
????????...

????????
????????<div?class="container__content">
????????????...
????????div>

????????
????????...
????div>

????
????...
div>

CSS部分

.container?{
????display:?flex;
}

.container__column?{
????flex:?1;

????/*?定于每列間隔的空間?*/
????margin:?0?8px;

????/*?內(nèi)容部分列布局?*/
????display:?flex;
????flex-direction:?column;
}

.container__content?{
????/*?內(nèi)部部分占據(jù)剩余的高度部分?*/
????flex:?1;
}

5、Sidebar（側(cè)邊導(dǎo)航欄）

兩列布局，左邊是導(dǎo)航欄目，右邊是內(nèi)容部分。尤其在后臺的場景，是非常常用的。如下圖所示：

HTML部分

<div?class="container">
????
????<aside?class="container__sidebar">
????????...
????aside>

????
????<main?class="container__main">
????????...
????main>
div>

CSS部分

.container?{
????display:?flex;
}

.container__sidebar?{
????width:?30%;
}

.container__main?{
????/*?占據(jù)剩余的寬度?*/
????flex:?1;

????/*?超出顯示滾動條?*/
????overflow:?auto;
}

6、簡單的網(wǎng)格布局

接下來我們使用彈性布局的方式，靈活實現(xiàn)網(wǎng)格布局，如下圖所示：

HTML部分

<div?class="row">
????
????<div?class="row__cell?row__cell--1-4">25%div>

????
????<div?class="row__cell?row__cell--fill">
????????...
????div>
div>

css部分

.row?{
????display:?flex;

????margin-left:?-8px;
????margin-right:?-8px;
}

.row__cell?{
????padding-left:?8px;
????padding-right:?8px;
}

/*?在給定的容器內(nèi)占據(jù)寬度的25%，不再與剩余的元素爭奪空間?*/
.row__cell--1-4?{
????flex:?0?0?25%;
}

/*?占據(jù)剩余容器的寬度?*/
.row__cell--fill?{
????flex:?1;
}

7、Split screen（平分屏幕）

類似在IPAD上的分屏業(yè)務(wù)場景，兩個應(yīng)用平分屏幕進(jìn)行顯示，如下圖所示：

HTML部分

<div?class="container">
????
????<div?class="container__half">
????????...
????div>

????
????<div?class="container__half">
????????...
????div>
div>

CSS部分

.container?{
????display:?flex;
}

.container__half?{
????flex:?1;
}

8、Sticky footer（底部吸附效果）

在網(wǎng)頁設(shè)計中，Sticky footers設(shè)計是最古老和最常見的效果之一，大多數(shù)人都曾經(jīng)經(jīng)歷過。它可以概括如下：如果頁面內(nèi)容不夠長的時候，頁腳塊粘貼在視窗底部；如果內(nèi)容足夠長時，頁腳塊會被內(nèi)容向下推送。如下圖所示：

HTML部分

<div?class="container">
????<header?class="container__header">
????????...
????header>
????<main?class="container__main">
????????...
????main>
????<footer?class="container__footer">
????????...
????footer>
div>

CSS部分

.container?{
????display:?flex;
????flex-direction:?column;
????height:?100%;
}

.container__header,
.container__footer?{
????flex-shrink:?0;
}

.container__main?{
????flex-grow:?1;
}

9、Sticky header（頂部吸附固定）

在實際業(yè)務(wù)中經(jīng)常碰到頁頭固定在瀏覽器的頂部，如下圖所示：

HTML部分

<div>
????<header?class="header">
????????...
????header>
????<main>
????????...
????main>
div>

CSS部分

.header?{
????/*?頂部吸附?*/
????position:?sticky;
????top:?0;
}

10、Sticky sections（內(nèi)容吸附）

內(nèi)容區(qū)域的吸附效果也是一種很常見的效果，如下圖所示：

HTML部分

<div?class="container">
????<section?class="container__section">
????????...
????section>

????
????...
div>

CSS部分

.container?{
????height:?100%;
????overflow:?scroll;
}

.container__section?{
????/*?占滿容器?*/
????height:?100%;
????width:?100%;

????/*?吸附頂部?*/
????position:?sticky;
????top:?0;
}

結(jié)束

今天的文章就分享到這里，希望對你日常的業(yè)務(wù)有所幫助，感謝你的閱讀。

內(nèi)容來源：https://github.com/1milligram/csslayout