grid常用设置

grid常用设置父元素1.dispaly:grid|inline-grid|subgrid;grid:生成块级网格inline-grid:生成行内网格subgrid:如果网格容器本身是网格项(嵌套网格容器),此属性用来继承其父网格容器的列、行大小2.grid-template-columns行大小grid-template-rows列大小3.单元格间距grid-column-…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

父元素
1.dispaly: grid | inline-grid | subgrid;
grid: 生成块级网格
inline-grid: 生成行内网格
subgrid: 如果网格容器本身是网格项(嵌套网格容器),此属性用来继承其父网格容器的列、行大小
2.grid-template-columns 行大小
grid-template-rows 列大小
3.单元格间距grid-column-gap、 grid-row-gap、grid-gap
grid-column-gap: 单元格列间距
grid-row-gap:单元格行间距
grid-gap:grid-row-gap 和 grid-column-gap的简写
4. 单元格内容宽度和左右对齐:justify-items: stretch | start | center | end;
5. 单元格高度和上下对齐align-items: stretch|start | end | center ;
start: 左对齐
end: 右对齐
center: 居中对齐
stretch: 填满(默认,内容居左)
6.总网格区域相对于容器左右对齐方式(网格内容大小小于容器宽时) justify-content: start | end | center | stretch | space-around | space-between | space-evenly ;
7. 总网格区域相对于容器上下对齐方式(网格内容大小小于容器高时) align-content: start | end | center | stretch | space-around | space-between | space-evenly ;
start: 左对齐
end: 右对齐
center: 居中对齐
stretch: 填满网格容器
space-around: 网格项两边间距相等,网格项之间间隔是单侧的2倍
space-between: 两边对齐,网格项之间间隔相等
space-evenly: 网格项间隔相等

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/157765.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • kit中文_flask和django的对比

    kit中文_flask和django的对比#介绍ImageKit是用于处理图像的Django应用程序。如果需要从原图上生成一个长宽为50×50的图像,则需要ImageKit。ImageKit附带了一系列图像处理器,用于调整大小和裁剪等常见

    2022年7月29日
    7
  • 【智能家居篇】wifi在智能家居中的应用

    【智能家居篇】wifi在智能家居中的应用

    2022年2月4日
    35
  • 最全QQ盗号手法分析,全面防御QQ盗号[通俗易懂]

    最全QQ盗号手法分析,全面防御QQ盗号[通俗易懂]你的QQ是否被盗过号,或者你身边的朋友、同学是否有过被盗号的经历。如今的安全机制真的没有效吗?盗号真的这么简单吗?本期将彻底解决这一问题。本期是上一期的姊妹篇,建议先看上一期,这样对于攻击者的手法才有更好的理解:传送门常见的盗号手法1、诱导链接以及二维码  这种情况在QQ群里面见的多。通常是发送一些具有诱惑性的链接诱导你去点击。也可能会是一些二维码,如下图。为了做这期,能更好的了解其盗号的手段,我把凡是我看到的盗号链接都点了个遍,那些恶意二维码我也扫了个遍。这是我在了解其原理并做了相应的安全措施.

    2022年7月26日
    15
  • 使用Vue写一个登录页面

    使用Vue写一个登录页面上一博客讲到构建了一个vue项目,现在在那个项目之上实现一个登录页面。1.构建项目的目录2.App.vue<template><divid="app"><router-view/></div></template><script>exportdefault{

    2022年5月21日
    115
  • webpack基本配置项_xml配置文件有什么用

    webpack基本配置项_xml配置文件有什么用前言上篇我们已经配置好了本地开发服务器,但是配置的相对比较凌乱,一个文件中有些是开发时用到的配置,有些是生成时用到的配置,有些是开发和生成都要用到的配置,所以我们这里把环境分为3个环境webpac

    2022年7月30日
    13
  • Java取余和取模

    Java取余和取模抛开高级语言的实现,取余运算和取模运算本身并不完全一致,区别在于对负整数进行取商时操作不同。虽然这样说,但是取余运算和取模运算的公式都一样。对于x和y两个整数(int),通过以下两个操作获取余数或模数:step1、求商:intz=x/ystep2、求余数或模数:intresult=x-y*z它们的差别在于,如果z的值…

    2022年4月29日
    53

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号