CSS Grid 和 Flexbox

1.使用示例

  1. CSS Grid:
    CSS Grid 是一种二维网格布局系统,可以用于创建复杂的网格布局。它允许你将元素放置到网格的行和列上,并通过设置网格属性来控制元素的位置和大小。

创建一个简单的 CSS Grid 布局,可以按照以下步骤进行:

a. 在父容器上应用 display: grid; 属性,将其设置为一个网格容器。
b. 通过设置 grid-template-columnsgrid-template-rows 属性来定义网格的列和行的大小和数量。
c. 使用 grid-columngrid-row 属性来指定元素在网格中的位置。

示例代码:

<div class="grid-container"><div class="item">Item 1</div><div class="item">Item 2</div><div class="item">Item 3</div>
</div>
.grid-container {display: grid;grid-template-columns: 1fr 1fr 1fr;grid-template-rows: 100px 100px;grid-gap: 10px;
}.item {background-color: #ddd;padding: 10px;text-align: center;
}

上述示例将会创建一个包含 3 列和 2 行的网格布局,每个网格项都会有相同的宽度和高度,并且它们之间有 10px 的间隔。

  1. Flexbox:
    Flexbox 是一种一维布局模型,用于创建灵活的布局和对齐方式。它使用 flex 属性和容器的主轴和交叉轴来控制元素的布局和对齐。

创建一个简单的 Flexbox 布局,可以按照以下步骤进行:

a. 在父容器上应用 display: flex; 属性,将其设置为一个 Flex 容器。
b. 使用 flex-direction 属性指定 Flex 容器的主轴方向。
c. 使用 justify-contentalign-items 属性来控制元素在主轴和交叉轴上的对齐方式。

示例代码:

<div class="flex-container"><div class="item">Item 1</div><div class="item">Item 2</div><div class="item">Item 3</div>
</div>
.flex-container {display: flex;flex-direction: row;justify-content: space-between;align-items: center;
}.item {background-color: #ddd;padding: 10px;text-align: center;
}

上述示例将会创建一个 Flexbox 布局,其中元素水平排列,并且它们之间有相等的间距。

2.属性

当涉及到更多的 CSS Grid 和 Flexbox 的属性时,以下是一些常用的属性和它们的说明:

CSS Grid 属性:

  1. grid-template-areas:定义网格布局中的区域。通过指定区域的名称,可以更方便地布局元素。

  2. grid-template-columnsgrid-template-rows:分别定义网格布局的列和行的大小和数量。可以使用长度单位、百分比、关键字(如 auto)或 fr 单位来指定大小。

  3. grid-columngrid-row:指定元素在网格中的位置。可以使用关键字(如 span)或数字来指定元素跨越的列或行的数量。

  4. grid-gap:定义网格项之间的间隔。可以使用长度单位或百分比来指定间隔的大小。

Flexbox 属性:

  1. flex-direction:定义 Flex 容器的主轴方向。可以是 row(水平方向)、column(垂直方向)、row-reverse(反向水平方向)或 column-reverse(反向垂直方向)。

  2. justify-content:控制 Flex 容器中元素在主轴上的对齐方式。可以是 flex-start(默认值,靠近主轴起点)、flex-end(靠近主轴终点)、center(居中对齐)、space-between(两端对齐,项目之间间隔相等)或 space-around(每个项目两侧的间隔相等)。

  3. align-items:控制 Flex 容器中元素在交叉轴上的对齐方式。可以是 flex-start(靠近交叉轴起点)、flex-end(靠近交叉轴终点)、center(居中对齐)、baseline(以第一行文字的基线对齐)或 stretch(默认值,拉伸以适应容器)。

  4. flex-growflex-shrinkflex-basis:这些属性用于控制元素在 Flex 容器中的伸缩行为。flex-grow 定义元素在可用空间中的放大比例,flex-shrink 定义元素在空间不足时的缩小比例,flex-basis 定义元素在没有放大或缩小时的基础大小。

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

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

相关文章

Numpy基础

目录&#xff1a; 一、简介:二、array数组ndarray&#xff1a;1.array( )创建数组&#xff1a;2.数组赋值和引用的区别&#xff1a;3.arange( )创建区间数组&#xff1a;4.linspace( )创建等差数列&#xff1a;5.logspace( )创建等比数列&#xff1a;6.zeros( )创建全0数组&…

半导体设备系列:半导体制造产能扩张,设备零部件需求旺盛

近年来国内半导体制造产能不断扩张&#xff0c;半导体设备厂商加速成长。我们认为下游发展将拉动上游本地化配套需求&#xff0c;半导体设备零部件迎来高增长阶段。 摘要 半导体设备零部件包含密封圈、EFEM、射频电源、静电吸盘、硅电极、真空泵、气体流量计、喷淋头等产品&a…

python数据分析之交叉验证

python数据分析之交叉验证 1、常用的分类算法 有监督:SVM向量机、梯度提升、决策树(随机森林)、朴素贝叶斯、逻辑斯蒂回归、神经网络(cnn、rnn) 无监督:k-means、隐马尔可夫 2、数据分析过程 1、采集数据 2、数据预处理 3、特征选择 4、模型训练、评估、保存 5、模型…

JVM虚拟机:各种JVM报错总结

错误 java.lang.StackOverflowError java.lang.OutOfMemoryError:java heap space java.lang.OutOfMemoryError:GC overhead limit exceeded java.lang.OutOfMemoryError:Direct buffer memory java.lang.OutOfMemoryError:unable to create new native thread java.lang.OutOf…

时间计算总结

文章目录 1.1&#xff1a;Java 获取两个时间的时间差(时、分、秒)&#xff1a;依赖&#xff1a;方法的说明方法测试 2.1 获取当天的开始时间2.2 获取当天的结束时间2.3 获取昨天的开始时间2.4 获取昨天的结束时间2.5 获取明天的开始时间2.6 获取明天的结束时间2.7 获取本周的开…

第3章 【课后习题】(完整版)

【3.18】写出下面程序的运行结果 //3.18写出下面程序的运行结果 #include <iostream> using namespace std; class test{public:test();~test() {};private:int i; }; test::test() {i25;for(int ctr0;ctr<10;ctr){cout<<"Counting at "<<ctr…

深入浅出:理解 JavaScript 中的 Promise.all()

在现代的 JavaScript 开发中&#xff0c;异步编程是一个无法避免的话题。无论是处理网络请求&#xff0c;用户输入&#xff0c;还是文件操作&#xff0c;异步编程都扮演着核心角色。ES6 引入的 Promise 极大地简化了异步操作&#xff0c;而 Promise.all() 则为处理多个并行的异…

线程的深入学习(二)

前言 上一篇讲了线程池的相关知识&#xff0c;这篇文章主要讲解一个 1.并发工具类如CountDownLatch、CyclicBarrier等。 2.线程安全和并发集合&#xff1a; 3.学习如何使用Java提供的线程安全的集合类&#xff0c;如ConcurrentHashMap、CopyOnWriteArrayList等。 并发工具类 …

Linux学习记录——삼십삼 http协议

文章目录 1、URL2、http协议的宏观构成3、详细理解http协议1、http请求2、http响应1、有效载荷格式2、有效载荷长度3、客户端要访问的资源类型4、修改响应写法5、处理不同的请求6、跳转 3、请求方法&#xff08;GET/POST&#xff09;4、HTTP状态码&#xff08;实现3和4开头的&a…

uniapp中用户登录数据的存储方法探究

Hello大家好&#xff01;我是咕噜铁蛋&#xff01;作为一个博主&#xff0c;我们经常需要在应用程序中实现用户登录功能&#xff0c;并且需要将用户的登录数据进行存储&#xff0c;以便在多次使用应用程序时能够方便地获取用户信息。铁蛋通过科技手段帮大家收集整理了些知识&am…

每天五分钟计算机视觉:揭秘迁移学习

本文重点 随着人工智能的迅速发展,深度学习已经成为了许多领域的关键技术。然而,深度学习模型的训练需要大量的标注数据,这在很多情况下是不现实的。迁移学习作为一种有效的方法,可以在已有的数据和模型上进行训练,然后将其应用于新的任务。这种方法大大降低了对新任务的…

嵌入式(一)嵌入式系统介绍 | 嵌入式微处理器,嵌入式系统开发流程,嵌入式系统应用

文章目录 1 嵌入式系统基本介绍1.1 基本概念1.2 嵌入式微处理器分类1.2.1 微控制器MCU1.2.2 微处理器MPU1.2.3 数字信号处理器&#xff08;DSP&#xff09;1.2.4 混合处理器和片上系统&#xff08;SOC&#xff09;1.2.5 可编程片上系统&#xff08;SOPC&#xff09; 1.3 嵌入式…

书香之家 国学启智——学夫堂幼儿国学托管永嘉上塘实验店启航

在教育创新的道路上&#xff0c;学夫堂幼儿国学托管永嘉上塘实验店迎来了一个重要的时刻。经过三个多月的精心筹备和试运营&#xff0c;今天正式宣布学夫堂幼儿国学托管在永嘉县城北街道景和佳苑8幢105号开门迎客。 学夫堂深信&#xff0c;国学智慧不仅是中华文化的瑰宝&#x…

7-34 通讯录的录入与显示 分数 10

文章目录 每日一言题目输入格式&#xff1a;输出格式&#xff1a;输入样例&#xff1a;输出样例&#xff1a; 结语 每日一言 批判的武器当然不能代替武器的批判。 --〈黑格尔法哲学批判〉导言 题目 通讯录中的一条记录包含下述基本信息&#xff1a;朋友的姓名、出生日期、性别…

C++ const 限定符的全面介绍

C const 限定符的全面介绍 1. const 修饰基本数据类型 定义 const 修饰的基本数据类型变量&#xff0c;值不可改变。 语法 const type variable value;特点 不可变性&#xff0c;增加代码可读性。 作用 定义不可修改的常量。 使用场景 全局常量、配置项。 注意事项…

常见函数的4种类型(js的问题)

• 匿名函数 • 回调函数 • 递归函数 • 构造函数 1、匿名函数 定义时候没有任何变量引用的函数 匿名函数自调&#xff1a;函数只执行一次 (function(a, b){console.log(a b);} )(1, 2);// 等价于 function foo (a, b){console.log(a b); }foo(1, …

阿赵UE学习笔记——7、导入资源

阿赵UE学习笔记目录 大家好&#xff0c;我是阿赵。   继续学习虚幻引擎的使用。这次将会把一个带动作和贴图的钢铁侠模型&#xff0c;导入的UE的项目中。 1、准备的资源 这里有2个fbx文件&#xff0c;都是带着网格和动画的&#xff0c;模型网格和骨骼是一样的&#xff0c;只…

MySQL是如何做到可以恢复到半个月内任意一秒的状态的?

MySQL的逻辑架构图 MySQL中两个重要的日志模块&#xff1a;redo log&#xff08;重做日志&#xff09;和binlog&#xff08;归档日志&#xff09; 我们先来看redo log&#xff1a; 介绍一个MySQL里经常说到的WAL技术&#xff0c;即Write-Ahead-Logging&#xff0c;它的关键点…

2023春季李宏毅机器学习笔记 03 :机器如何生成文句

资料 课程主页&#xff1a;https://speech.ee.ntu.edu.tw/~hylee/ml/2023-spring.phpGithub&#xff1a;https://github.com/Fafa-DL/Lhy_Machine_LearningB站课程&#xff1a;https://space.bilibili.com/253734135/channel/collectiondetail?sid2014800 一、大语言模型的两种…

Linux基础知识点(五-信号)

一、信号的基本概念 1.1 信号的概念 信号&#xff08;signal&#xff09;&#xff0c;又称为软中断信号&#xff0c;用于通知进程发生了异步事件&#xff0c;它是Linux系统响应某些条件而产生的一个事件&#xff0c;它是在软件层次上对中断机制的一种模拟&#xff0c;是一种异…