前端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. javaweb图书管理系统之账号密码验证登录

    验证账号与密码是否正确功能 一.注册功能 首先,在验证账号与密码是否正确的前提下的,需要先注册一个账号,如果没有账号,就会进不去,也无法验证. 其实,注册功能就是一个添加的功能,仿照我的第一篇文章,往 ...

  2. Mybatis-Dao层实现（通过代理方式）

    1.代理方式开发是主流 2.Mapper接口开发方法只需要编写Mapper接口(相当于Dao接口),然后由Mybatis根据接口创建动态代理对象 Mapper接口开发需要遵循以下规范 一一对应 Use ...

  3. TNS-12533: TNS:illegal ADDRESS parameters(修复)

    修复 TNS-12533: TNS:illegal ADDRESS parameters oracle@prd:/home/oracle$sqlplus sys/abc@fp as sysdba SQ ...

  4. 无需debug，通过抽象模型快速梳理代码核心流程

    上一篇我们通过DSM来确定了核心对象并构建了抽象模型.本篇是<如何高效阅读源码>专题的第八篇,我们来基于抽象模型来梳理核心流程. 本节主要内容: 如何通过抽象模型来梳理核心流程 从类名和注 ...

  5. k8s TLS bootstrap解析-k8s TLS bootstrap流程分析

    当k8s集群开启了TLS认证后,每个节点的kubelet组件都要使用由kube-apiserver的CA签发的有效证书才能与kube-apiserver通信:当节点非常多的时候,为每个节点都单独签署证 ...

  6. 一篇文章带你搞懂InnoDB的索引｜结合样例

    关注公众号[程序员白泽],带你走进一个不一样的程序员/学生党 前言 前阵子面试的时候,在第三面问到了MySQL索引相关的知识点,并且给出了一些SQL语句分析索引的执行情况.所以今天这篇文章给大家讲讲索 ...

  7. js 查找数组中某个字符出现的次数

    1. js 查找数组中某个字符出现的次数 代码示例 let arr = ['asd', 'green', 'yeadt', 'red', 'wati', 'red', 'red'] let index ...

  8. CoAP调试工具 Mozi.IoT.CoAP

    前言 CoAP是一种类HTTP协议的物联网专用协议,其数据包为人类不可阅读的字节流形式,在开发相关应用的时候往往不能准确的了解数据包的内容.故需要专用的调试工具对数据和通讯进行调试. CoAP协议介绍 ...

  9. C++逆向 可变参数Hook

    目录 C++逆向 可变参数Hook 0x00 前言: 0x01 C++可变参数: 可变参数简介 可变参数代码实战 0x02 逆向分析C++可变参数原理 0x03 printf Hook实战 Pwn菜鸡 ...

  10. Mybatis Plus之内置Mapper实践

    MyBatis Plus,作为对MyBatis的进一步增强,大大简化了我们的开发流程,提高了开发速度 配置 由于Mybatis Plus是建立在Mybatis之上的,所以其已经依赖了Mybatis,故 ...