前端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. Linux 0.11源码阅读笔记-中断过程

    Linux 0.11源码阅读笔记-中断过程 是什么中断 中断发生时,计算机会停止当前运行的程序,转而执行中断处理程序,然后再返回原被中断的程序继续运行.中断包括硬件中断和软件中断,硬中断是由外设自动产 ...

  2. python-你好

    你的程序会读入一个名字,比如John,然后输出"Hello John". 输入格式: 一行文字. 输出格式: 一行文字. 输入样例: Mary Johnson 输出样例: Hell ...

  3. linux安装sbt

    1.官网下载tgz sbt - Download (scala-sbt.org) 2.解压 tar zxvf sbt-0.13.5.tgz -C /opt/scala/ 3.建立启动sbt脚本 /*选 ...

  4. Python简单文件读写

    ''' 用文件存储账户信息 使用列表存储多个账户信息,每个账户为一个字典对象 ''' users=[] #创建一个空列表 users.append({'id':'admin','pwd':'1235@ ...

  5. Qt 实现配置 OpenCV 环境，并实现打开图片与调用摄像头

    一.说明 所用QT版本:5.9.1 电脑配置:win10,64位系统 调用的是编译好的:OpenCV-MinGW-Build-4.1.0(稍后放链接) 在大学期间,由于项目需求需要用到QT+openc ...

  6. vivo 短视频推荐去重服务的设计实践

    一.概述 1.1 业务背景 vivo短视频在视频推荐时需要对用户已经看过的视频进行过滤去重,避免给用户重复推荐同一个视频影响体验.在一次推荐请求处理流程中,会基于用户兴趣进行视频召回,大约召回2000 ...

  7. zabbix使用自带模板监控MySQL

    监控mysql不能直接使用zabbix自带模板,还需要到被监控的mysql客户端做配置. 1.在zabbix   web配置步骤如下图: 2.配置完之后去看mysql主机监控项的时候看到mysql的监 ...

  8. 虚拟机VMware的安装与Xshell的应用

    先安装VMware 1.安装就按照提示一点点安装就行了 配置网络 打开VMware 这里的IOS映像文件在https://developer.aliyun.com/mirror/里下载 这里用方向键往 ...

  9. 微信小程序循环列表点击每一个单独添加动画

    首先,咱们看一下微信小程序动画怎么实现,我首先想到的是anime.js,但是引入之后用不了,微信小程序内的css也无法做到循环的动态,我就去找官方文档看看有没有相应的方法,哎,还真有 点击这里查看 微 ...

  10. vue 项目build后部署上去页面空白

    默认情况下vue-cli 会认为项目是部署在域名的根路径上. 但是当项目被部署到了一个子路径上,就要自己选定子路径. 比如项目被部署在了 https://www.ujapp.com/my-app, 则 ...