前端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. vue报错解决方案

    Vue build faild 解决办法: https://blog.csdn.net/u011169370/article/details/83346176 ? jbcmVideo git:(oah ...

  2. Wireshark捕获网易云音乐音频文件地址

    打开Wireshark,开始捕获. 打开网易云音乐,然后播放一首歌. Wireshark停时捕获,然后在不活的文件中搜索字符串"mp3".可以发现有如下信息: 将其中的内容:&qu ...

  3. 猿人学python爬虫第一题

    打开网站.F12,开启devtools.发现有段代码阻止了我们调试 好的.接下来有几种解决方法 1- 绕过阻止调试方法 方法1(推荐) 鼠标放在debugger该行,左边数字行号那一列.右键选择不在永 ...

  4. mysql_install_db 一次修复密码

    我用mysql 社区版进行的安装,在linux centos 操作系统下, yum install 方式系统默认安装时没有密码的,需要你及时设置,但是我操作多次后,并没有修改密码,启动和关闭多次以后就 ...

  5. alipay 当面付扫码支付实战开发

    alipay 当面付扫码支付开发 参考官网地址:https://opendocs.alipay.com/open/194/105072 1.当面付介绍: 当面付包括付款码支付和扫码支付两种收款方式.适 ...

  6. docker基础_docker镜像与分层

    docker镜像与分层 docker镜像由一些松耦合的制度镜像层组成 docker负责堆叠这些镜像层并将它们表示为单个统一的对象 当 docker image pull ubuntu:latest 时 ...

  7. 组合式应用新利器？SaaS新时代事件网格如何解决集成标准化问题

    摘要:组合式应用需要面临的一个难题是如何解决各个应用之间的集成标准问题,比如应用可能仅支持HTTP.TCP等协议中的一种,而缺乏统一的通讯标准就给业务落地该架构带来了困难.下面介绍事件网格(Event ...

  8. Linux-流程控制语法-函数-属组

    1.流程控制 1.1 条件选择 1.1.1选择执行if语句 格式: if COMMANDS; then COMMANDS; [ elif COMMANDS; then COMMANDS; ] ... ...

  9. 最新 x86_64 系统调用入口分析 (基于 5.7.0)

    最新 x86_64 系统调用入口分析 (基于5.7.0) 整体概览 最近的工作涉及系统调用入口,但网上的一些分析都比较老了,这里把自己的分析过程记录一下,仅供参考. x86_64位系统调用使用 SYS ...

  10. Open Harmony移植：build lite配置目录全梳理

    摘要:本文主要介绍build lite 轻量级编译构建系统涉及的配置目录的用途,分析相关的源代码. 本文分享自华为云社区<移植案例与原理 - build lite配置目录全梳理>,作者:z ...