整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

前端面试：项目中用过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小时内与您取得联系。

推荐阅读
友情链接 贵阳 丰南区 吴旗县 荣成 东宝区 玉屏侗族自治县 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服