前端面試：項目中用過grid嗎？flex布局和gri

前端面試：項目中用過grid嗎？flex布局和grid布局有什么區別？

rid布局概念

CSS Gird已經被W3C納入到css3的一個布局模塊中，被稱為CSS Grid Layout Module，一般習慣稱為網格布局。

網格布局可以將應用程序分割成不同的空間，定義它們的大小、位置和層級。

簡單來說，網格布局就像表格一樣可以讓元素按列和行對齊排列，不同的是，網格布局沒有內容結構，比如一個網格布局的子元素可以定位自己的位置，可以是實現類似定位的效果。

兼容性:

測試地址：https://www.caniuse.com/

可以看到幾大瀏覽器都已經支持了Grid布局，接下來我們來一步步的來玩轉Grid布局

grid vs flex

我們知道flex和grid都是css3新的布局方式，如果瀏覽器都支持兩種布局，你會選擇那種呢？當我們了解兩者以后就能做出正確的選擇了。

flex布局是一維布局，grid布局是二維布局。

網格容器和網格項

我們知道給一個元素設置了display:flex就指定了flex彈性布局，實現grid布局一樣簡單，給元素設置display:grid就可以了。

container 就是一個網格容器，里面的item就是網格項

網格術語

網格線 grid lines

網格線組成了網格，是網格水平和垂直的分界線。

網格軌道 grid track

就是兩條網格線之間的空間，可以理解成表格里面的行或者列，網格里面為grid-row和grid-column，網格軌道可以設置大小，來控制高度或者寬度。

上圖grid-column2和grid-column3之間的區域就是一個網格軌道

網格單元格 grid cell

就是四條網格線之間的空間，是最小的單位。

網格區域 area

也是四條網格線組成的空間，可能包含一個或者多個單元格。

實現一個grid布局

了解網格個相關概念，接下來我們來創建一個簡單的grid布局。

上面我們說網格軌道的時候說了可以給網格軌道設置大小，可以控制高度或者寬度。

我們來分析下上面的css

1、給grid元素設置了 display: grid來聲明使用grid布局

2、使用grid-template-columns來設置列寬，分別為 300px 200px 150px

3、使用grid-template-rows來設置行高，分別為150px 100px

以上代碼我們是實現了一個兩行三列的grid布局，此時瀏覽器顯示如下

進階

單位 fr

grid-template-columns和grid-template-rows不只是可以設置具體的數值，還可以設置百分比、rem一類的，還可以設置一個新單位 fr，它是來干什么的呢？

我們先把上面demo里面的css文件改下

展示如下：

以上實現了彈性布局，fr用來實現彈性布局, 我們這里使用里repeat(2, 1fr),表示重復兩次，都是1fr。

grid-gap 網格項間隙

css修改如下

展示如下

網格布局屬性 grid-placement-properties

網格布局屬性主要用來放置容器內的網格項目，就是單一項目的位置。網格布局屬性主要有以下四個屬性：

 1、grid-column-start 設置垂直方向的開始位置網格線
 2、grid-column-end 設置垂直方向的結束位置網格線
 3、grid-row-start 設置水平方向的開始位置網格線
 4、grid-row-end 設置水平方向的結束位置網格線

以上的簡寫方式

 1、grid-column: grid-column-start / grid-column-end
 2、grid-row: grid-row-start / grid-row-end

終極簡寫

grid-area: grid-row-start / grid-column-start / grid-row-end / grid-colun-end

是不是有點蒙，我們可以大概看下，先來看deme

還是熟悉的html布局

先來看看我們的成果

顯示網格線的圖片

我們來分析下css

1、grid元素聲明grid布局，grid-template-columns和grid-template-rows來創建一個兩行三列的網格，但是渲染的結果卻是三行三列，為什么？我們先接著往下分析

2、css文件中單獨設置item-2網格項的位置，

 grid-column-start:2 垂直線開始位置為2
 grid-column-end:4垂直線結束位置為4
 grid-row-start:1 水平線開始位置為1
 grid-row-end:2 水平線結束位置為2

3、通過單獨設置item-2的位置，把本身要在第一行的item-3給擠下來了，然后 3、4、5按照300 200 150 排列

4、這時候兩件三列排列完了，但是還有個元素，此時剩下的元素就會獨自占一行的位置，它的大小一樣會按照網格容器定義的行高列寬來渲染

5、最后我們給item-6來設置了終極簡寫方式，

終極簡寫：行開始 / 列開始 / 行結束 / 列結束，然后我們把位置對應上

 grid-area:3 / 1 / 4 / 4

通過設置網格項樣式屬性，我們可以就實現很多復雜的布局結構了。

幾種布局

最后我們結合上面所學到的實現幾個常見布局

1、左右固定，中間自適應

設置網格容器的 grid-template-columns: 100px 1fr 100px或者grid-template-columns: 100px auto 100px就可以實現，再簡單不過了

效果：

2、九宮格

使用grid-gap設置網格項間距使用fr來平分

顯示如下

3、圣杯、雙飛翼

使用grid-area設置header元素和footer元素位置，結合grid-template-columns和grid-template-rows實現布局

效果圖：

、摘要

（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一定會一一解答的。

者的區別描述：

flex：將對象作為彈性伸縮盒顯示
inline-flex：將對象作為內聯塊級彈性伸縮盒顯示

一句話來描述就是當Flex Box 容器沒有設置寬度大小限制時，當display 指定為 flex 時，FlexBox 的寬度會填充父容器，當display指定為 inline-flex 時，FlexBox的寬度會包裹子Item，如下圖所示：

對應的代碼如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <style>

    /*Flex 容器*/
    .flex__container {
      display: inline-flex;
      background-color: gray;
    }

    /*Flex 子 Item */
    .flex__item {
      width: 50px;
      height: 50px;

      background-color: aqua;
      border: 1px solid black;
    }

  </style>
</head>
<body>

<!--Flex容器-->
<div class="flex__container">

  <!--Flex容器中的子Item-->
  <div class="flex__item"></div>
  <div class="flex__item"></div>
  <div class="flex__item"></div>
  <div class="flex__item"></div>
</div>

</body>
</html>

完畢

在線咨詢

上一篇：移動端購物商城(微信小程序+VUE移動端)功能介紹
下一篇：HTML5版《星際爭霸》下載：用Win10瀏覽器迎戰

您的項目需求

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

整合營銷服務商

前端面試：項目中用過grid嗎？flex布局和gri

rid布局概念

網格術語

進階

、摘 要

二、pycharm操作說明

1. 創建項目

2. 創建HTML文件

3. HTML格式說明

三、網頁設計

1. 草圖繪制

2. css名字定義

四、網頁開發

1. body部分

2. 網頁測試

3. head部分

五、總 結

您的項目需求

、摘要

五、總結