前端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. VSCode使用Settings Sync同步配置和插件

    转载参考地址:https://www.cnblogs.com/zzhaolei/p/12028241.html 1.需求 自己平常工作,一般在公司用公司的电脑,在家里就是自己的,但是vscode如果配 ...

  2. vue换算单位px自动转换rem

    cnpm i postcss-px2rem --save cnpm install px2rem-loader --save 2.配置px2rem build目录下vue-loader.conf.js ...

  3. Mybatis模糊查询结果为空的解决方案

    写在前面 Mybatis使用模糊查询,查询结果为空的解决方案,我的代码是 select * from sp_user where 1=1 <if test="username!=nul ...

  4. Spring Boot-@ImportResource注解

    @ImportResource:导入Spring的配置文件,让配置文件里面的内容生效 第一步:创建一个spring配置文件bean.xml <?xml version="1.0&quo ...

  5. Go 1.18泛型的局限性初探

    前言 Go 1.18 版本之后正式引入泛型,它被称作类型参数(type parameters),本文初步介绍 Go 中泛型的使用.长期以来 go 都没有泛型的概念,只有接口 interface 偶尔类 ...

  6. JetBrains Rider C# 学习②

    前言 C#从入门到精通 链接:https://pan.baidu.com/s/1UveJI_f-c5Dul3GLIICRHg 提取码:1314 C#入门课程 刘铁猛 链接:https://pan.ba ...

  7. bootStrap简要和学习笔记

    bootStrap简要和学习笔记前端在学些了html.css.JavaScript三件套后,我们感觉前端变数太多了,需要创造力来设计一些可能经常使用的界面啊.按钮样式啊等,也就有了一些前端的框架,那何 ...

  8. Python paho-mqtt使用心得

    一.概述 一)基本概念 使用回调处理从MQTT代理返回的数据,要使用回调需要先定义回调函数然后将其指派给客户端实例(client). 例如: # 定义一个回调函数 def on_connect(cli ...

  9. JavaScript一行代码获取公网IP及城市信息

    废话不多说,直接上代码! <script type="text/javascript" src="http://pv.sohu.com/cityjson?ie=ut ...

  10. .NET Core企业微信网页授权登录

    1.开发前准备 参数获取 corpid 每个企业都拥有唯一的corpid,获取此信息可在管理后台"我的企业"-"企业信息"下查看"企业ID" ...