前端CSS3布局display:flex用法

1. 先附上代码

点击查看代码 
<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>display:flex</title>

    <style>

      .grid-box {

        width: 100%;

        background-color: lightseagreen;

      }

      .grid-box>div {

        background-color: lightskyblue;

        text-align: center;

        border: 1px solid red;

      }

    </style>

  </head>

  <body>

    <div class="grid-box">

      <div>1</div>

      <div>2</div>

      <div>3</div>

      <div>4</div>

      <div>5</div>

      <div>6</div>

      <div>7</div>

      <div>8</div>

    </div>

  </body>

</html>

效果图

给grid-box加上display: grid

点击查看代码 
.grid-box {

    width: 100%;

    background-color: lightseagreen;

    display: grid;

}

效果图

可以看到并没有什么变化，说明grid默认纵向排列

2. 接下来详解grid布局的几个常用属性

  • grid-template-columns
  • grid-template-rows
  • gap
  • grid-template-areas
  • justify-items
  • align-items

1. grid-template-columns

决定网格布局中的列数（和宽度）

网格呈三列排列且每列120px

上代码

点击查看代码 
.grid-box {

    width: 100%;

    background-color: lightseagreen;

    display: grid;

    grid-template-columns: 120px 120px 120px;

}

效果图

简写方式

grid-template-columns: repeat(3, 120px)

也可这样设置

grid-template-columns: 120px auto 120px

两边的宽度为120px，中间的宽度自动填充

效果图

可用fr表示比例关系(fraction 的缩写，意为"片段”)

将宽度平均分成3等份

上代码

点击查看代码 
.grid-box {

    width: 100%;

    background-color: lightseagreen;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

}

效果图

将宽度分成3份，每份各占1 2 3

上代码

点击查看代码 
.grid-box {

    width: 100%;

    background-color: lightseagreen;

    display: grid;

    grid-template-columns: 1fr 2fr 3fr;

}

效果图

单元格大小固定，但容器大小不确定，auto-fill属性就会自动填充

上代码

点击查看代码 
.grid-box {

    width: 100%;

    background-color: lightseagreen;

    display: grid;

    grid-template-columns: repeat(auto-fill, 170px);

}

效果图

minmax()函数产生一个长度范围，接受两个参数，分别为最小值和最大值

上代码

点击查看代码 
.grid-box {

    width: 100%;

    background-color: lightseagreen;

    display: grid;

    grid-template-columns: 1fr minmax(150px, 300px);

}

效果图

第二列的最小宽度为150px，最大宽度为300px

2. grid-template-rows

规定网格布局中行的高度

前三行每行高120px

上代码

点击查看代码 
.grid-box {

    width: 100%;

    background-color: lightseagreen;

    display: grid;

    grid-template-rows: 120px 120px 120px;

}

效果图

简写方式

grid-template-rows: repeat(3, 120px)

也可这样设置

grid-template-rows: 120px auto 120px

第一行高度为120px，第二行的高度自动，第三行的高度为120px

效果图

可用fr表示比例关系(fraction 的缩写，意为"片段”)

将前三行的高度设置为1fr 2fr 3fr

上代码

点击查看代码 
.grid-box {

    width: 100%;

    background-color: lightseagreen;

    display: grid;

    grid-template-rows: 1fr 2fr 3fr;

}

效果图

minmax()函数产生一个长度范围，接受两个参数，分别为最小值和最大值

上代码

点击查看代码 
.grid-box {

    width: 100%;

    background-color: lightseagreen;

    display: grid;

    grid-template-rows: 80px minmax(150px, 300px) 120px;

}

效果图

3. gap

规定网格布局中行与列之间间隙的尺寸

上代码

点击查看代码 
.grid-box {

    width: 100%;

    background-color: lightseagreen;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    grid-template-rows: 1fr 2fr 3fr;

    gap: 1em;

}

效果图

还可以这样写

grid-gap: 1em 2em;

1em是行之间的间隙，2em是列之间的间隙

效果图

4. grid-template-areas

在网格布局中规定区域

上代码

点击查看代码 
<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>display:flex</title>

    <style>

      .item1 {

        grid-area: myArea1;

      }

      .item5 {

        grid-area: myArea5;

      }

      .item8 {

        grid-area: myArea8;

      }

      .grid-box {

        width: 100%;

        background-color: lightseagreen;

        display: grid;

        grid-template-areas:

          'myArea1 myArea1 . . '

          'myArea5 myArea8 . . '

          'myArea5 myArea8 . . ';

      }

      .grid-box>div {

        background-color: lightskyblue;

        text-align: center;

        border: 1px solid red;

      }

    </style>

  </head>

  <body>

    <div class="grid-box">

      <div class="item1">1</div>

      <div class="item2">2</div>

      <div class="item3">3</div>

      <div class="item4">4</div>

      <div class="item5">5</div>

      <div class="item6">6</div>

      <div class="item7">7</div>

      <div class="item8">8</div>

    </div>

  </body>

</html>

效果图

myArea1 myArea1 . .表示4列，一个点表示1列

item1占1行2列（第1行的第1列和第2列）

item5占2行1列（第1列的第2行和第3行）

item8占2行1列（第2列的第2行和第3行）

4. justify-items

纵轴上的对齐方式

上代码

点击查看代码 
.grid-box {

    width: 100%;

    height: 600px;

    background-color: lightseagreen;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

}

效果图

justify-items: flex-start;（默认值）

效果图

justify-items: center;

效果图

justify-items: flex-end;

效果图

4. align-items

横轴上的对齐方式

上代码

点击查看代码 
.grid-box {

    width: 100%;

    height: 600px;

    background-color: lightseagreen;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

}

效果图

align-items: flex-start;（默认值）

效果图

align-items: center;

效果图

align-items: flex-end;

效果图

前端CSS3布局display:grid用法的更多相关文章

  1. 前端CSS3布局display:flex用法

    前端CSS3布局display:flex用法 先附上代码 点击查看代码 <!DOCTYPE html> <html> <head> <meta charset ...

  2. 前端页面布局之Grid布局

    在讲布局前,先说两句题外话,写博时,突然想到了郭德纲说过的一个段子“说两个人骂架,不是你有理,你嗓门大,你唾沫星子崩我一脸,你就能骂赢,要看谁命长,过两年你死了,我站你坟头咋说咋是对的,你在那小匣里还 ...

  3. CSS3中的display:grid网格布局介绍

    1.网格布局(grid): 它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局; 2.基本概念: 容器和项目,如图所示: <div class="content&qu ...

  4. CSS3：布局display属性的flex（弹性布局）

    CSS3:布局display属性的flex(弹性布局) 一.简介 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.设为Flex布局以后, ...

  5. 浅谈CSS3中display属性的Flex布局

    浅谈CSS3中display属性的Flex布局   最近在学习微信小程序,在设计首页布局的时候,新认识了一种布局方式display:flex 1 .container { 2 display: fle ...

  6. web前端学习（三）css学习笔记部分（8）-- SVN的介绍和应用、CSS动画效果、CSS3布局属性全接触

    15.SVN的介绍和应用 15.1.SVN的介绍和应用课程概要 将代码进行集中管理,有版本号的进行迭代,方便集体工作的build流程 15.2.SVN的介绍 SVN是Subversion的简称,是一个 ...

  7. CSS3 Flex布局和Grid布局

      1 flex容器的六个属性 flex实现垂直居中: <div class="box"> <span class="item">< ...

  8. 前端CSS3动画animation用法

    前端CSS3动画animation用法 学习如下动画属性 @keyframes animation-name animation-duration animation-delay animation- ...

  9. 移动平台3G手机网站前端开发布局技巧

    本文转载至:移动平台3G手机网站前端开发布局技巧汇总 - 前端开发-武方博 您或许正在或准备参与一个WepApp项目,您或许正在Google搜索mobile development相 关的文章,您或许 ...

随机推荐

  1. CentOS的安装以及IP地址（动态/静态）的配置

    啊!复试压力好大,跟好多学长聊完以后觉得自己更该好好努力了,一边好好准备复试科目,一边把之前忘掉的捡起来吧,加油! 1.安装的具体过程请参照这位博主写的,我觉得写的很详细,https://blog.c ...

  2. Idea导出jar包和使用自定义API

    自定义jar简单实现案例 学习内容 1. 自定义工具类 2. 导出jar 3. 加载Jar包 4. 调用自定义的API方法 总结 学习内容 1. 自定义工具类 新建一个java项目,然后创建包和工具类 ...

  3. Windows CMD常用命令集合

    CMD命令: 开始->运行->键入cmd或command(在命令行里可以看到系统版本.文件系统版本) chcp 修改默认字符集chcp 936默认中文chcp 65001 1. appwi ...

  4. Promise原理实现（一）：前置知识点

      实现promise首先需要了解如下知识点: 1: 高阶函数 (一个函数作为另外一个函数的参数,这个包含的函数就是高阶函数): outer是一个高阶函数,inner函数作为一个参数传递:此处也是闭包 ...

  5. Blazor组件自做九: 用20行代码实现文件上传,浏览目录功能 (3)

    接上篇 Blazor组件自做九: 用20行代码实现文件上传,浏览目录功能 (2) 7. 使用配置文件指定监听地址 打开 appsettings.json 文件,加入一行 "UseUrls&q ...

  6. phpstorm配置xdebug 3.0最新教程！！！配置不成功的快看！

    前言 之前2月份就开始配置xdebug,始终没有成功. 今天看到一篇写得挺详细的文章,心血来潮又折腾了下,可惜没成功. 验证始终说我配置错误 后面去阅读官方的文档,修改了些配置,居然搞成功了!! ni ...

  7. SSRF——介绍利用（不全）

    1. SSRF介绍 SSRF(Server-side Request Forge, 服务端请求伪造). 由攻击者构造的攻击链接传给服务端执行造成的漏洞,一般用来在外网探测或攻击内网服务. 2. SSR ...

  8. 实战-DRF快速写接口(认证权限频率)

    实战-DRF快速写接口 开发环境 Python3.6 Pycharm专业版2021.2.3 Sqlite3 Django 2.2 djangorestframework3.13 测试工具 Postma ...

  9. 简单了解AndroidManifest.xml文件

    AndroidManifest.xml:资源清单文件 <?xml version="1.0" encoding="utf-8"?> <mani ...

  10. 理解ASP.NET Core - 授权(Authorization)

    注:本文隶属于<理解ASP.NET Core>系列文章,请查看置顶博客或点击此处查看全文目录 之前,我们已经了解了ASP.NET Core中的身份认证,现在,我们来聊一下授权. 老规矩,示 ...