超Fashion的 10 種CSS現代布局

通CSS布局已經快滿足不了這乏味的開發生活了。

無趣的頁面更是有種半死不活的憂傷！

是時候來點不一樣的了！

整個好活兒，我們來看10種不一樣的布局方式！

01. place-items: center——Super 大居中

居中，永遠是CSS領域中最大的謎團，但是今天山人有一妙計，使用 place-items: center 。從此單行居中So easy！媽的，再也不用擔心我的居中了！

1.指定 grid 作為 display 方法

2.在同一個元素寫入 place-items: center。

3.place-items 是同時設置 align-items 和 justify-items 的快速方法。align-items 和 justify-items 也都設置了 center。

.parent {
display: grid;
place-items: center;
}

02. flex: <grow> <shrink> <baseWidth>——搞懂攤煎餅布局

營銷網站經常能看見這樣的布局，比如，圖片中一行3個項目，項目中可能是文本，圖像等，我們希望他可以在設備上絲滑的疊放拓展。

當我們拿出 Flexbox 來應對的時候，就不需要在屏幕尺寸發生變化時，通過媒體查詢來調整這些元素的位置。

flex 簡寫代表：flex: <flex-grow> <flex-shrink> <flex-basis> 。如果您想讓您的框填充到它們的 <flex-basis> 大小，縮小到更小的尺寸，但不拉伸以填充任何額外的空間，請寫入：flex: 0 1 <flex-basis> 。在這種情況下，您的 <flex-basis> 是 150px，所以應該是這樣：

.parent {
display: flex;
}

.child {
flex: 0 1 150px;
}

如果您確實希望框在換到下一行時拉伸并填充空間，請將 <flex-grow> 設置為 1 ，所以應該是這樣：

.parent {
display: flex;
}

.child {
flex: 1 1 150px;
}

現在，當您增加或減少屏幕尺寸時，這些 flex 項目會縮小和增長。

03. grid-template-columns:

minmax(<min>, <max>) …)——側邊欄：

圖片中的網格布局，就用到了 minmax 函數。我們在這里做的是將側邊欄最小設置為 150px ，但在更大的屏幕上，讓它伸展出 25% 。側邊欄將始終占據其父級水平空間的 25%，直到 25% 變得小于 150px 。

將以下值添加為 grid-template-columns 的值：minmax(150px, 25%) 1fr 。

在第一列（在這種情況下，側邊欄）的項目其 minmax 為 150px（在25% ），

第二列項目（這里指 main 部分）占據其余的空間作為單一的 1fr 軌道。

.parent {
display: grid;
grid-template-columns: minmax(150px, 25%) 1fr;
}

04.grid-template-rows: auto 1fr auto ——煎餅堆棧布局

這種布局通常用于網站和應用程序，跨多個移動應用程序（頁腳通常是工具欄）和網站（單頁應用程序通常使用這種全局布局）。

向組件添加 display: grid 將為您提供一個單列網格，但是主區域的高度將僅與頁腳下方的內容一樣高。

使頁腳粘在底部，請添加：

.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}

1fr頁眉和頁腳內容設置為自動采用其子項的大小，并將剩余空間 ( 1fr ) 應用于主區域，而auto調整大小的行將采用其子項的最小內容的大小，以便該內容大小增加，行本身將增長以進行調整。

05. grid-template: auto 1fr auto / auto 1fr auto——經典圣杯布局

對于經典的圣杯布局，有頁眉、頁腳、左側邊欄、右側邊欄和主要內容。類似于以前的布局，但現在有側邊欄！

要使用一行代碼編寫整個網格，請使用 grid-template 屬性。這使您可以同時設置行和列。

屬性和值對為：grid-template: auto 1fr auto / auto 1fr auto 。第一個和第二個以空格分隔的列表之間的斜線是行和列之間的分隔符。

.parent {
display: grid;
grid-template: auto 1fr auto / auto 1fr auto;
}

與上一個示例一樣，頁眉和頁腳具有自動調整大小的內容，這里的左側和右側邊欄會根據其子項的固有大小自動調整大小。但是，這次是水平尺寸（寬度）而不是垂直尺寸（高度）。

06. grid-template-columns: repeat(12, 1fr)——12 跨網格

接下來我們有另一個經典布局：12 跨網格。您可以使用 repeat() 函數在 CSS 中快速編寫網格。對網格模板列使用 repeat(12, 1fr); 將為每個 1fr 提供 12 列。

.parent {
display: grid;
grid-template-columns: repeat(12, 1fr);
}

.child-span-12 {
grid-column: 1 / 13;
}

現在您有一個 12 列的軌道網格，我們可以將子項放在網格上。一種方法是使用網格線放置它們。例如， grid-column: 1 / 13 將跨越從第一到最后一行（第 13 行）并跨越 12 列。grid-column: 1 / 5; 將跨越前四個列。

另一種方法是使用 span 關鍵字。使用 span ，您可以設置起始線，然后設置從該起點跨越的列數。在這種情況下，grid-column: 1 / span 12 將等效于 grid-column: 1 / 13 ，而 grid-column: 2 / span 6 將等效于 grid-column: 2 / 8 。

.child-span-12 {
grid-column: 1 / span 12;
}

07. grid-template-columns(auto-fit, minmax(<base>, 1fr))——RAM(Repeat, Auto, MinMax)

對于這第七個示例，結合您已經了解的一些概念來創建具有自動放置且靈活的子項的響應式布局。漂亮整齊。這里要記住的關鍵點是 repeat 、 auto-(fit|fill) 和 minmax()' ，可以記住它們的首字母縮寫詞 RAM。

總之，應是這樣：

.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

您再次使用 repeat ，但這次使用 auto-fit 關鍵字而不是顯式數值。這可以自動放置這些子元素。這些子元素的基本最小值為 150px ，最大值為 1fr ，這意味著在較小的屏幕上，它們將占據整個 1fr 寬度，當它們達到 150px 寬度時，它們將開始流到同一條線上。

使用 auto-fit ，當它們的水平尺寸超過 150px 時，框將拉伸以填充整個剩余空間。但是，如果您將其更改為 auto-fill ，則當超出 minmax 函數中的基本大小時，它們將不會拉伸：

.parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

08. 排列布局：justify-content: space-between

對于下一個布局，這里要主要說明的是 justify-content: space-between ，它將第一個和最后一個子元素放置在其邊界框的邊緣，其余空間均勻分布在元素之間。對于這些卡片，它們被放置在 Flexbox 顯示模式中，使用 flex-direction: column 將方向設置為 column。

這會將標題、描述和圖像塊放在父卡片內的垂直列中。然后，應用 justify-content: space-between 將第一個（標題）和最后一個（圖像塊）元素錨定到 flexbox 的邊緣，并且它們之間的描述性文本以相等的間距放置到每個端點。

.parent {
display: flex;
flex-direction: column;
justify-content: space-between;
}

09. clamp(<min>, <actual>, <max>)——保持風格

這里，我們介紹一些只有少數瀏覽器支持的技術，但這些技術對布局和響應式 UI 設計有非常令人興奮的影響。在本演示中，您將使用固定工具設置寬度，如下所示：width: clamp(<min>, <actual>, <max>) 。

這將設置絕對最小和最大尺寸以及實際尺寸。有了值，應該這樣：

.parent {
width: clamp(23ch, 60%, 46ch);
}

這里的最小尺寸是 23ch 或 23 個字符單元，最大尺寸是 46ch ，46 個字符。字符寬度單位基于元素的字體大小（特別是 0 字形的寬度）。“實際”尺寸為 50%，代表此元素父寬度的 50%。

在這里， clamp() 函數所做的是使該元素保持 50% 的寬度，直到 50% 大于 46ch （在較寬的視口上）或小于 23ch （在較小的視口上）。您可以看到，當我拉伸和收縮父尺寸時，這張卡片的寬度會增加到其最大限制點并減小到其限制最小點。然后它保持在父級的中心，因為我們已經應用了其他的屬性來將它居中。這可以實現更清晰的布局，因為文本不會太寬（超過 46ch ）或太窄（小于 23ch ）。

這也是實現響應式排版的好方法。例如，您可以編寫：font-size: clamp(1.5rem, 20vw, 3rem) 。在這種情況下，標題的字體大小將始終保持在 1.5rem 和 3rem 之間，但會根據 20vw 實際值增大和縮小以適應視口的寬度。

這是一種很好的技術，可以通過最小和最大尺寸值確保易讀性，但請記住，并非所有現代瀏覽器都支持它，因此請確保您有回退措施并進行測試。

10.aspect-ratio: <width> / <height>——保持寬高比

最后要介紹的這一布局工具目前還沒有任何穩定的瀏覽器版本，最近在 Chromium 84 中被引入 Chrome Canary，Firefox 正在積極努力實現這一點。使用 aspect-ratio 屬性，當我調整卡片大小時，綠色視覺塊保持 16 x 9 的寬高比。我們通過 aspect-ratio: 16 / 9 保持此寬高比。

.video {
aspect-ratio: 16 / 9;
}

要在沒有此屬性的情況下保持 16 x 9 的寬高比，需要使用 padding-top hack 并為其提供 56.25% 的 padding 以設置頂寬比。我們很快就會有一個屬性來避免黑客攻擊和計算百分比的需要。可以使用 1 / 1 的比例制作正方形，使用 2 / 1 制作 2:1 比例?？梢栽O置任何圖像縮放比例。

Web前端開發中，頁面布局是構建網站的基礎之一。隨著HTML5和CSS3的發展，Flexbox和Grid成為現代網頁設計中不可或缺的工具。這兩種布局模式為開發者提供了更加靈活和強大的布局能力，特別是在響應式設計方面表現卓越。本文將詳細介紹Flexbox和Grid布局，并通過實例來展示其使用方法。

Flexbox布局

Flexbox（Flexible Box）布局提供了一種更有效的方式來分配容器中項目的空間，特別是當項目大小未知或動態變化時。它是一種一維布局方法，意味著我們可以在一個方向上（水平或垂直）進行空間分配。

Flexbox基本概念

要使用Flexbox，首先需要將一個容器的display屬性設置為flex。

.flex-container {
  display: flex;
}

容器內的直接子元素自動成為flex項目，并根據需要沿主軸（默認為水平軸）或交叉軸（垂直于主軸）對齊。

Flexbox布局實例：簡單的導航欄

<nav class="flex-nav">
  <a href="#">首頁</a>
  <a href="#">產品</a>
  <a href="#">服務</a>
  <a href="#">關于我們</a>
  <a href="#">聯系我們</a>
</nav>

.flex-nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 50px;
  background-color: #333;
}

.flex-nav a {
  color: white;
  text-decoration: none;
  padding: 10px;
}

在這個例子中，導航欄的鏈接會均勻地分布在整個容器中，justify-content: space-around;確保了每個鏈接之間的空間是相等的。

Grid布局

CSS Grid布局是一個二維布局系統，允許我們在行和列上同時進行布局。它適合于構建復雜的網頁布局，特別是當你需要在多個方向上對項目進行精確控制時。

Grid基本概念

使用Grid布局，首先需要將一個容器的display屬性設置為grid。

.grid-container {
  display: grid;
}

然后，可以通過grid-template-columns和grid-template-rows屬性來定義列和行的大小。

Grid布局實例：產品特性區塊

<div class="grid-features">
  <div class="feature">特性一</div>
  <div class="feature">特性二</div>
  <div class="feature">特性三</div>
  <div class="feature">特性四</div>
</div>

.grid-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 20px;
  padding: 20px;
}

.feature {
  background-color: #f7f7f7;
  padding: 20px;
  text-align: center;
}

在這個例子中，我們創建了一個兩列的特性區塊，grid-gap屬性添加了項目之間的間隔。

結合Flexbox和Grid

在實際的網頁設計中，Flexbox和Grid可以結合使用，以達到更好的布局效果。通常，Flexbox適合于組件和小規模布局的對齊問題，而Grid適合于大規模的頁面結構布局。

結合使用實例：博客頁面布局

<div class="blog-layout">
  <header>博客頭部</header>
  <aside>側邊欄</aside>
  <main>文章內容</main>
  <footer>博客底部</footer>
</div>

.blog-layout {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: auto 1fr auto;
  grid-gap: 10px;
  height: 100vh;
}

header, footer {
  grid-column: 1 / -1; /* 跨越所有列 */
  background-color: #333;
  color: white;
  padding: 15px;
  text-align: center;
}

aside {
  background-color: #f7f7f7;
  padding: 15px;
}

main {
  background-color: #fff;
  padding: 15px;
}

在這個博客頁面布局中，頭部和底部跨越所有列，側邊欄和文章內容則分別占據剩余的空間。這種布局方式使得頁面結構清晰，同時也易于響應不同的屏幕尺寸。

實例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox and Grid Layout Example</title>
<style>
  body {
    margin: 0;
    font-family: Arial, sans-serif;
  }

  .container {
    display: grid;
    grid-template-areas:
      'header header header'
      'nav content content'
      'footer footer footer';
    grid-template-columns: 200px 1fr 1fr;
    grid-template-rows: auto 1fr auto;
    height: 100vh;
  }

  header {
    grid-area: header;
    background: #333;
    color: #fff;
    padding: 10px;
    text-align: center;
  }

  nav {
    grid-area: nav;
    background: #eee;
    padding: 10px;
  }

  .nav-links {
    display: flex;
    flex-direction: column;
  }

  .nav-links a {
    text-decoration: none;
    padding: 10px;
    color: #333;
    border-bottom: 1px solid #ccc;
  }

  .nav-links a:hover {
    background-color: #ddd;
  }

  main {
    grid-area: content;
    padding: 20px;
    overflow-y: auto;
  }

  footer {
    grid-area: footer;
    background: #333;
    color: #fff;
    padding: 10px;
    text-align: center;
  }
</style>
</head>
<body>
<div class="container">
  <header>網站標題</header>
  <nav>
    <div class="nav-links">
      <a href="#">首頁</a>
      <a href="#">產品</a>
      <a href="#">服務</a>
      <a href="#">關于我們</a>
      <a href="#">聯系我們</a>
    </div>
  </nav>
  <main>
    <h1>主要內容</h1>
    <p>這里是頁面的主要內容，可以包含文字、圖片、視頻等多種類型的媒體。</p>
    <!-- 更多內容 -->
  </main>
  <footer>版權所有 ? 2023</footer>
</div>
</body>
</html>

在這個例子中：

.container 類定義了整個頁面的Grid布局結構，其中包含了頭部（header）、側邊導航（nav）、主內容區（content）和底部（footer）。
grid-template-areas 屬性定義了各個區域的名稱和位置。
grid-template-columns 和 grid-template-rows 屬性定義了列和行的大小。
nav 元素中的 .nav-links 類使用Flexbox布局創建了一個垂直的導航鏈接列表。
main 元素代表頁面的主要內容區域，可以根據需要添加更多的內容。

這個布局示例提供了一個基本的框架，可以根據具體需求進行擴展和定制。

結語

Flexbox和Grid布局是前端工程師必備的技能。通過靈活運用這兩種布局方式，可以創建出既美觀又功能強大的響應式網站。隨著實踐的積累，你將能夠更加熟練地掌握這些工具，打造出更加完善的用戶體驗。

、摘要

（OF作品展示）

OF之前介紹了用python實現數據可視化、數據分析及一些小項目，但基本都是后端的知識。想要做一個好看的小系統，我們還要學一些前端的知識，今天OF將講解如何用pycharm（全棧開發不錯的工具）做一張好看的網頁，以后我們就可以自己開發網頁/網站放到互聯網上。

主要內容：網頁前端布局

適用人群：Python初學者，前端初學者

準備軟件：pycharm

二、pycharm操作說明

1. 創建項目

1) 下載完成pycharm, 點擊file-New Project...

2) 按下圖步驟創建一個項目，目前我們選擇Pure python即可，以后我們可以學習用Django/flask等框架來做完整的系統

2. 創建HTML文件

1）在創建的項目空白處鼠標右鍵-New-HTML File

2）輸入英文的網頁名字，盡量不要輸入中文/特殊字符

3. HTML格式說明

當雙擊打開我們創建后的HTML文件，大家會看到下面的界面

三、網頁設計

1. 草圖繪制

在開始開發網頁前，我們需要自己設計下想要把網頁做成什么樣，為了節省成本OF都是自己設計的頁面樣式，可以手繪，也可以在PPT上畫。

2. css名字定義

我們先學習一個比較簡單的布局如下圖，大家可以看到下圖已經畫出了我們需要添加的內容，要注意的地方是比如Taylor的圖片和文字一定要用<div class=bord>框住，否則Taylor圖片與文字將會是左右的關系，而不是上下

四、網頁開發

1. body部分

根據上述的css名字定義，先填充<body>內的代碼，那么我們就完成一半的工作了，代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="intro">
    <p class="peo">人物介紹</p>
</div>
<div id="pic1">
    <div class="bord">
        <img class="img" src="pic/Taylor.png"/>
        <p class="word">Taylor</p>
    </div>
    <div class="bord">
        <img class="img" src="pic/yan.png"/>
        <p class="word">東</p>
    </div>
    <div class="bord">
        <img class="img" src="pic/song.png"/>
        <p class="word">喬</p>
    </div>
</div>
</body>
</html>

2. 網頁測試

1）鼠標移到代碼處，在右上角我們會看到一排瀏覽器，我們點擊其中一個運行

2）目前看到的網頁內容從上到下顯示

3. head部分

首先我們簡要了解下flex布局，大家可以看到下圖中#main的style樣式中display:flex，在body部分將3個顏色內容框在<div id="main">中，運行結果是3個顏色的內容橫向展示了，而不是上下

1）那么我們先從“人物介紹”的布局開始，“人物介紹”居中展現（用flex中justify-content:center），而且下面有一條黑線，OF準備用border樣式來實現，所以在<div id=intro>里另加了個<div class=peo>，代碼如下：

(注：style中的#main對應body中的id=main, .main對應class=main)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #intro {
            display: -webkit-flex; /* Safari */
            display: flex;
            justify-content: center;
        }
        .peo {
            max-width: 10rem;
            border-bottom: 0.2rem solid #000000;
            font-family: sans-serif;
            font-size: 1.5rem;
            color: #0070C0;
            line-height: 3rem;
        }
    </style>
</head>
<body>
<div id="intro">
    <p class="peo">人物介紹</p>
</div>
<div id="pic1">
    <div class="bord">
        <img class="img" src="pic/Taylor.png"/>
        <p class="word">Taylor</p>
    </div>
    <div class="bord">
        <img class="img" src="pic/yan.png"/>
        <p class="word">東</p>
    </div>
    <div class="bord">
        <img class="img" src="pic/song.png"/>
        <p class="word">喬</p>
    </div>
</div>
</body>
</html>

運行結果：

2）圖片部分是3個<div class=bord>橫向展示，所以要在框住它們的<div id=pic1>樣式中設置flex布局，在<style>里加入以下代碼：

#pic1 {
    display: -webkit-flex; /* Safari */
    display: flex;
    justify-content: center;
}

運行結果：

3）圖片之間靠太近，圖片大小不一致，文字沒居中，我們在<style>里加入以下代碼：

.bord{
    padding: 1rem 2rem;
}


.img {
    border: 0.2rem solid #e3e3e3;
    max-width: 15rem;
    height: 22rem;
}


.word {
    text-align: center;
}

運行結果：

五、總結

今天我們學會了flex布局，今后所有的網頁排版都可以實現了，祝愿大家都有所收獲，完整的代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #intro {
            display: -webkit-flex; /* Safari */
            display: flex;
            justify-content: center;


        }

        .peo {
            max-width: 10rem;
            border-bottom: 0.2rem solid #000000;
            font-family: sans-serif;
            font-size: 1.5rem;
            color: #0070C0;
            line-height: 3rem;
        }

        #pic1 {
            display: -webkit-flex; /* Safari */
            display: flex;
            justify-content: center;
        }

        .bord{
            padding: 1rem 2rem;
        }

        .img {
            border: 0.2rem solid #e3e3e3;
            max-width: 15rem;
            height: 22rem;
        }

        .word {
            text-align: center;
        }
    </style>
</head>
<body>
<div id="intro">
    <p class="peo">人物介紹</p>
</div>
<div id="pic1">
    <div class="bord">
        <img class="img" src="pic/Taylor.png"/>
        <p class="word">Taylor</p>
    </div>
    <div class="bord">
        <img class="img" src="pic/yan.png"/>
        <p class="word">東</p>
    </div>
    <div class="bord">
        <img class="img" src="pic/song.png"/>
        <p class="word">喬</p>
    </div>
</div>
</body>
</html>

今天的知識比較基礎但非常實用，每天學會一個小技能，積少成多，以后就能成為大神。如果大家對網頁上的實現有什么不懂的，盡請留言，OF一定會一一解答的。

在線咨詢

上一篇：300套卡通字體合集，簡繁中英字體快速套用，編輯設計
下一篇：前端開發，CSS的常用套路附demo的效果實現與源碼

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

超Fashion的 10 種CSS現代布局

01. place-items: center——Super 大居中

02. flex: <grow> <shrink> <baseWidth>——搞懂攤煎餅布局

03. grid-template-columns:

minmax(<min>, <max>) …)——側邊欄：

04.grid-template-rows: auto 1fr auto ——煎餅堆棧布局

05. grid-template: auto 1fr auto / auto 1fr auto——經典圣杯布局

06. grid-template-columns: repeat(12, 1fr)——12 跨網格

07. grid-template-columns(auto-fit, minmax(<base>, 1fr))——RAM(Repeat, Auto, MinMax)

08. 排列布局：justify-content: space-between

09. clamp(<min>, <actual>, <max>)——保持風格

10.aspect-ratio: <width> / <height>——保持寬高比

Flexbox布局

Flexbox基本概念

Flexbox布局實例：簡單的導航欄

Grid布局

Grid基本概念

Grid布局實例：產品特性區塊

結合Flexbox和Grid

結合使用實例：博客頁面布局

實例

結語

、摘 要

二、pycharm操作說明

1. 創建項目

2. 創建HTML文件

3. HTML格式說明

三、網頁設計

1. 草圖繪制

2. css名字定義

四、網頁開發

1. body部分

2. 網頁測試

3. head部分

五、總 結

您的項目需求

、摘要

二、pycharm操作說明

五、總結