CSS布局 Flex 和 Grid

在 CSS 中,理解 flex 和 Grid 布局非常重要,今天把这两个重要知识点回顾一下。

Flexbox 弹性盒子布局

弹性布局支持 flex、inline-flex,支持块和内联。

容器
  1. 轴的概念,在 Flexbox,有主轴和侧轴的概念,轴可以理解行和列,对于轴还有一个方向的概念,默认情况,行的方向是从左至右,列的方向是从上至下。通过 flex-direction 控制
  2. 对齐方式,flex 容器的对齐方方式有三种,justify-content 主轴对齐,默认flex-start 左对齐,align-items 侧轴对齐,默认stretch充满,align-content 行对其方式,默认stretch充满。align-items和 align-content,一个是元素在行内的对齐方式,一个行间的对其方式。
  3. 换行:默认 flexbox 是不换行的。
元素
  1. 支持元素按比例缩放,flex-grow: 放大占比,flex-shrink:缩小占比,flex-basis:初始化尺寸。flex-basis 一般都是 auto,如果需要将布局与实际元素尺寸进行分离可以设置对应的大小。
  2. 自对齐:与容器的 3 种对齐方式不同,自对齐只针对元素自身。
  3. 顺序:可以定义元素顺序,元素在容器内根据顺序进行排列

从 CSS tricky 盗了一张图,帮助使用理解 flexbox,非常直观。

在这里插入图片描述

Grid网格布局

Flexbox 设计用于一维布局(行或列),而 Grid 允许同时进行水平和垂直布局对齐,非常适合更复杂的网页设计。通过将元素的 display 属性设置为 grid 或 inline-grid来实现一个网格布局,支持块和内联。

容器
  1. 网格定义:显式网格:可以使用 grid-template-rows、grid-template-columns 和 grid-template-areas 定义网格行和列。隐式网格:自动生成行和列,通过 grid-auto-rows、grid-auto-columns 和 grid-auto-flow 进行管理。例如我如果网络超出了定义,如果定义了 3x3 网格,但却放入了 10 个元素,那么网格就会使用隐式定义,auto-rows、auto-columns 默认都是auto,auto-flow 默认是行,自动加行。
  2. 指定位置:可以使用 grid-row-start、grid-row-end、grid-column-start 和 grid-column-end 指定放到什么位置。或者使用简写属性 grid-row、grid-column 和 grid-area。grid-area 属性允许将项目放置在 grid-template-areas 中定义的特定区域。例如,下面的代码
.item-a {grid-column: 1 / 2;grid-row: 2 / 3;
}.item {grid-area: 2 / 1 / 4 / 3; // 指定坐标<row-start> / <column-start> / <row-end> / <column-end>;
}
  1. 对齐:网格提供 justify-items(单元格内行对齐)、align-items(单元格内列对齐)、justify-content(行对齐) 和 align-content(列对齐) 等属性来控制元素在其单元格内的对齐方式以及整个网格在其容器内的对齐方式。
  2. 间隙属性:row-gap、column-gap 和简写的 gap 属性允许定义行和列之间的空间。
  3. FR单位:自动调整以适应可用空间,例如 repeat(3, 1fr); 等宽 3 列。
元素
  1. 对齐:justify-self单个元素单元格内行对齐,align-self单个元素单元格内列对齐。

Grid 布局比 Flow 布局灵活也复杂一些,同样来一张图便于理解。

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/1852.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

实验 3--表的基本操作与数据查询

文章目录 实验 3--表的基本操作与数据查询4.3.1 实验目的4.3.2 实验准备实验内容1.在 SSMS 中向数据库 YGKQ 中的表插入数据。2.使用 T-SQL 语句向 YGKQ 中的表插入数据。3.在 SSMS 中删除数据库 YGKQ 中的表数据。4.使用 T-SQL 语句删除数据库 YGKQ中的表数据。5.在 SSMS 中修…

OPAM模型(细粒度图像分类)

OPAM模型&#xff08;细粒度图像分类&#xff09; 摘要Abstract1. OPAM1.1 文献摘要1.2 细粒度图像分类1.3 研究背景1.4 OPAM模型创新点1.5 OPAM模型1.5.1 补丁过滤1.5.2 显着性提取1.5.3 细粒度区域级注意模型对象-空间约束方法&#xff08;Object spatial constraint&#xf…

WSL安装-问题解决

WslRegisterDistribution failed with error: 0x8004032d WslRegisterDistribution failed with error: 0x80080005 Error: 0x80080005 ??????? 解决&#xff1a; 1、 winr输入&#xff1a;optionalfeatures.exe 2、打开这两项

javaWeb项目-网吧网咖管理系统功能介绍

项目关键技术 开发工具&#xff1a;IDEA 、Eclipse 编程语言: Java 数据库: MySQL5.7 框架&#xff1a;ssm、Springboot 前端&#xff1a;Vue、ElementUI 关键技术&#xff1a;springboot、SSM、vue、MYSQL、MAVEN 数据库工具&#xff1a;Navicat、SQLyog 1、JAVA简介 JavaSc…

Vitis HLS 学习笔记--优化指令-BIND_OP_STORAGE

目录 1. BIND_OP_STORAGE 概述 1.1 BIND_OP 1.2 BIND_STORAGE 2. 语法解析 2.1 BIND_OP 2.2 BIND_OP 用法示例 2.3 BIND_STORAGE 2.4 BIND_STORAGE 示例 3. 实例演示 4. 总结 1. BIND_OP_STORAGE 概述 BIND_OP_STORAGE 其实是两个优化指令的合称&#xff1a;BIND_OP…

easyx库的学习(文字绘制)

前言 昨天刚刚写完了基本图形的制作&#xff0c;今天直接可以来看看&#xff0c;在easyx中使用文字 直接看代码吧 文字绘制 void drawTest() {printf("hello,EasyX");//指的是在控制台打印//设置字体大小&#xff0c;样式settextstyle(30, 0, "微软雅黑&quo…

模块三——二分:704.二分查找

文章目录 前言二分查找算法简介特点学习中的侧重点算法原理模板 题目描述算法原理解法一&#xff1a;暴力解法解法二&#xff1a;二分查找算法算法流程细节问题循环结束的条件为什么是正确的&#xff1f;时间复杂度 代码实现 前言 本系列博客是逐渐深入的过程&#xff0c;建议…

BCLinux8U6系统部署oceanbase分布式数据库社区版之一、准备 OBD 中控机

本文记录了在BCLinux8U6操作系统的虚拟服务器准备oceanbase开源数据库的 OBD 中控机的过程。 一、中控机环境 1、虚拟服务器硬件配置 2、操作系统版本信息 [rootlocalhost ~]# cat /etc/os-release NAME"BigCloud Enterprise Linux" VERSION"8.6 (Core)&qu…

【链表】Leetcode 两数相加

题目讲解 2. 两数相加 算法讲解 我们这里设置一个头结点&#xff0c;然后遍历两个链表&#xff0c;使用一个flag记录相加的结果和进位&#xff0c;如果两个链表没有走到最后或者进位不等于0&#xff0c;我们就继续遍历处理进位&#xff1b;如果当前的链表都遍历完成了&#x…

移动Web学习08-响应式布局bootstrap的使用

2、响应式布局 2.1、什么响应式布局 响应式布局是一种网页设计的方法&#xff0c;能够使网站在不同的设备上&#xff08;如桌面电脑、平板电脑、手机等&#xff09;呈现出最佳的用户体验。其核心思想是使网页能够根据用户的设备和屏幕尺寸自动调整布局和内容&#xff0c;以适…

代码随想录算法训练营第五十九天 | 503. 下一个更大元素 II、42. 接雨水

代码随想录算法训练营第五十九天 | 503. 下一个更大元素 II、42. 接雨水 503. 下一个更大元素 II题目解法 42. 接雨水题目解法 感悟 503. 下一个更大元素 II 题目 解法 题解链接 使用两个size class Solution { public:vector<int> nextGreaterElements(vector<in…

【网络原理】UDP协议的报文结构 及 校验和字段的错误检测机制(CRC算法、MD5算法)

目录 UDP协议 UDP协议的报文结构及注意事项 UDP报文结构中的校验和字段 1. 校验和主要校验的内容 2. UDP校验和的实现方式 3. CRC&#xff08;循环冗余校验&#xff09;算法 4. MD5&#xff08;Message Digest Algorithm 5&#xff09; UDP协议 上一篇文章提过&#xf…

计算机网络实验——学习记录五(TCP协议2)

一、TCP协议重传机制 TCP协议是一种面向连接、可靠的传输层协议。为了保证数据的可靠传输&#xff0c;TCP采用数据包重传的机制来应对网络传输过程中可能出现的丢包、错包和乱序等问题。 TCP协议的重传包括超时重传、快速重传、带选择确认SACK的重传和重复SACK重传四种。 二、…

grafana安装篇(1)

目录 grafana概念&#xff1a; 它具有以下主要特点&#xff1a; Grafana 常用于以下场景&#xff1a; 环境介绍&#xff1a; 前置环境&#xff1a; (1)保证可以连接外网 (2)防火墙和selinux已关闭 1.下载安装grafana10.0.1-1rpm包 2.启动grafana 3.浏览器访问 3.设置…

实验2 NFS部署和配置

一、实训目的 1.了解NFS基本概念 2.实现NFS的配置和部署 二、实训准备 1.准备一台能够安装OpenStack的实验用计算机&#xff0c;建议使用VMware虚拟机。 2.该计算机应安装CentOS 7&#xff0c;建议采用CentOS 7.8版本。 3.准备两台虚拟机机&#xff08;客户机和服务器机&…

Linux CPU 占用率 100% 排查

其他层面要考虑到的地方 mysql&#xff0c;有执行时间特别长的sql、死锁redis雪崩等相关问题并发导出数据量大Java定时器服务业务复杂&#xff0c;比如像每天要更新电商的统计表&#xff0c;每天发送优惠券等业务需要提前计算才能保证业务使用时的流畅性&#xff0c;我这个原因…

leetcode最大间距(桶排序+Python)

虽然直接排完序&#xff0c;再求最大差值更快&#xff0c;这里我们还是学一下桶排序。 桶排序主要维护一个bucket&#xff0c;初始bucket【i】 0&#xff0c;遍历nums&#xff0c;当i存在时&#xff0c;令bucket【i】 1&#xff0c;表示存在。遍历完nums&#xff0c;bucket中有…

DiT解读:当Diffusion遇上Transformer

前置知识 ViT Vision Transformer是一种基于Transformer架构的深度学习模型&#xff0c;专门用于处理计算机视觉任务。他的1出现给以往CNN base的图像工作带来了很多新的可能性 ViT的核心思想是将图像分割成均匀的图像块&#xff0c;然后将这些图像块转换为序列&#xff0c;…

【LAMMPS学习】八、基础知识(3.8)计算扩散系数

8. 基础知识 此部分描述了如何使用 LAMMPS 为用户和开发人员执行各种任务。术语表页面还列出了 MD 术语&#xff0c;以及相应 LAMMPS 手册页的链接。 LAMMPS 源代码分发的 examples 目录中包含的示例输入脚本以及示例脚本页面上突出显示的示例输入脚本还展示了如何设置和运行各…

4.点云数据的配准

1.点云配准ICP(Iterative Closest Point)算法 点云配准的原理及ICP(Iterative Closest Point)算法原理参照博客【PCL】—— 点云配准ICP(Iterative Closest Point)算法_icp点云配准-CSDN博客。 &#xff08;1&#xff09;点云配准原理&#xff1a;三维扫描仪设备对目标物体一…