【学习css3】使用flex和grid实现等高元素布局

过往的实现方法是使用浮动加计算布局来实现，当flex和grid问世时，这一切将变得简单起来

一、简单的两列实现

1、先看页面效果

2、css代码

    .container {padding: 10px;width: 100ch;margin: 0 auto;box-shadow: inset 0 0 0 2px #ccc;}.column {margin: 20px;background-color: #ccc;padding: 10px;}.flexbox {display: flex;}.grid {display: grid;grid-auto-flow: column;}

3、html代码

    <div class="container">flex布局</div><div class="container flexbox"><div class="column"><div class="element"><p> 松饼冰淇淋小熊软糖。甜苹果派，蛋糕，糖果，胡萝卜蛋糕。糖蛋奶酥，柠檬糖软糖。</p></div></div><div class="column"><div class="element"><p>提拉米苏粉布丁。蛋糕芝士蛋糕糕点焦糖提拉米苏。</p></div></div></div><div class="container">grid布局</div><div class="container grid"><div class="column"><div class="element"><p>松饼冰淇淋小熊软糖。甜苹果派，蛋糕，糖果，胡萝卜蛋糕。糖蛋奶酥，柠檬糖软糖。</p></div></div><div class="column"><div class="element"><p>提拉米苏粉布丁。蛋糕芝士蛋糕糕点焦糖提拉米苏。</p></div></div></div>

 二、每行放置3列，多出来的自动到下一行

1、还是先看页面效果

2、css代码

    .container {padding: 10px;width: 100ch;margin: 0 auto;box-shadow: inset 0 0 0 2px #ccc;}.column {margin: 20px;background-color: #ccc;padding: 10px;}.flexbox {display: flex;}.flexbox.col-3 {flex-wrap: wrap;}.flexbox.col-3 .column {margin: 0.5rem;width: calc((100% / 3) - 1rem);}.grid {display: grid;grid-auto-flow: column;}.grid.col-3 {grid-gap: 1rem;grid-template-columns: repeat(3, 1fr);grid-auto-flow: unset;}.grid.col-3 .column {margin: 0;}

3、html代码

<div class="container">flex布局</div><div class="container flexbox col-3"><div class="column"><div class="element"><p>flexbox col-3: 甜苹果派，蛋糕，糖果，胡萝卜蛋糕。糖蛋奶酥，柠檬糖软糖。</p></div></div><div class="column"><div class="element"><p>提拉米苏粉布丁。蛋糕芝士蛋糕糕点焦糖提拉米苏。</p></div></div><div class="column"><div class="element"><p>松饼冰淇淋小熊软糖。甜苹果派，蛋糕，糖果，胡萝卜蛋糕。糖蛋奶酥，柠檬糖软糖。</p></div></div><div class="column"><div class="element"><p>蛋奶酥馅饼，柠檬糖，小熊软糖，棒棒糖，甜点，芝麻饼干。提拉米苏粉布丁。蛋糕芝士蛋糕糕点焦糖提拉米苏。</p></div></div></div><div class="container">grid布局</div><div class="container grid col-3"><div class="column"><div class="element"><p>grid col-3:甜苹果派，蛋糕，糖果，胡萝卜蛋糕。糖蛋奶酥，柠檬糖软糖。</p></div></div><div class="column"><div class="element"><p>提拉米苏粉布丁。蛋糕芝士蛋糕糕点焦糖提拉米苏。</p></div></div><div class="column"><div class="element"><p>松饼冰淇淋小熊软糖。甜苹果派，蛋糕，糖果，胡萝卜蛋糕。糖蛋奶酥，柠檬糖软糖。</p></div></div><div class="column"><div class="element"><p>蛋奶酥馅饼，柠檬糖，小熊软糖，棒棒糖，甜点，芝麻饼干。提拉米苏粉布丁。蛋糕芝士蛋糕糕点焦糖提拉米苏。</p></div></div></div>

三、全部代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>使用flex和grid实现等高元素布局</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}.container {padding: 10px;width: 100ch;margin: 0 auto;box-shadow: inset 0 0 0 2px #ccc;}.column {margin: 20px;background-color: #ccc;padding: 10px;}.flexbox {display: flex;}.flexbox.col-3 {flex-wrap: wrap;}.flexbox.col-3 .column {margin: 0.5rem;width: calc((100% / 3) - 1rem);}.grid {display: grid;grid-auto-flow: column;}.grid.col-3 {grid-gap: 1rem;grid-template-columns: repeat(3, 1fr);grid-auto-flow: unset;}.grid.col-3 .column {margin: 0;}</style>
</head>
<body><div class="container">flex布局</div><div class="container flexbox"><div class="column"><div class="element"><p> 松饼冰淇淋小熊软糖。甜苹果派，蛋糕，糖果，胡萝卜蛋糕。糖蛋奶酥，柠檬糖软糖。</p></div></div><div class="column"><div class="element"><p>提拉米苏粉布丁。蛋糕芝士蛋糕糕点焦糖提拉米苏。</p></div></div></div><div class="container">grid布局</div><div class="container grid"><div class="column"><div class="element"><p>松饼冰淇淋小熊软糖。甜苹果派，蛋糕，糖果，胡萝卜蛋糕。糖蛋奶酥，柠檬糖软糖。</p></div></div><div class="column"><div class="element"><p>提拉米苏粉布丁。蛋糕芝士蛋糕糕点焦糖提拉米苏。</p></div></div></div><div class="container">flex布局</div><div class="container flexbox col-3"><div class="column"><div class="element"><p>flexbox col-3: 甜苹果派，蛋糕，糖果，胡萝卜蛋糕。糖蛋奶酥，柠檬糖软糖。</p></div></div><div class="column"><div class="element"><p>提拉米苏粉布丁。蛋糕芝士蛋糕糕点焦糖提拉米苏。</p></div></div><div class="column"><div class="element"><p>松饼冰淇淋小熊软糖。甜苹果派，蛋糕，糖果，胡萝卜蛋糕。糖蛋奶酥，柠檬糖软糖。</p></div></div><div class="column"><div class="element"><p>蛋奶酥馅饼，柠檬糖，小熊软糖，棒棒糖，甜点，芝麻饼干。提拉米苏粉布丁。蛋糕芝士蛋糕糕点焦糖提拉米苏。</p></div></div></div><div class="container">grid布局</div><div class="container grid col-3"><div class="column"><div class="element"><p>grid col-3:甜苹果派，蛋糕，糖果，胡萝卜蛋糕。糖蛋奶酥，柠檬糖软糖。</p></div></div><div class="column"><div class="element"><p>提拉米苏粉布丁。蛋糕芝士蛋糕糕点焦糖提拉米苏。</p></div></div><div class="column"><div class="element"><p>松饼冰淇淋小熊软糖。甜苹果派，蛋糕，糖果，胡萝卜蛋糕。糖蛋奶酥，柠檬糖软糖。</p></div></div><div class="column"><div class="element"><p>蛋奶酥馅饼，柠檬糖，小熊软糖，棒棒糖，甜点，芝麻饼干。提拉米苏粉布丁。蛋糕芝士蛋糕糕点焦糖提拉米苏。</p></div></div></div>
</body>
</html>

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

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

相关文章

WordPress外贸建站案例

WordPress外贸建站案例

Vicuna维楚纳wordpress外贸主题 Vicuna维楚纳wordpress外贸主题&#xff0c;适合跨境电商产品展示的wordpress外贸建站模板。 https://www.jianzhanpress.com/?p7132 Der德尔wordpress建站主题 经典中国红红色wordpress主题&#xff0c;适合跨境电商产业园企业建站的wordpr…
阅读更多...
C#定时发送邮件功能

C#定时发送邮件功能

C#定时发送邮件功能 背景 自动运维监控客户端在自动关闭时&#xff0c;需要给实施同学发送提醒邮件。支持163邮箱、qq邮箱、火狐邮箱等各种通用邮箱。 定时器发送邮件 代码 邮件功能模块 using ITSLog.LogManage; using System; using System.Collections.Generic; using…
阅读更多...
LabVIEW设备检修信息管理系统

LabVIEW设备检修信息管理系统

开发了基于LabVIEW设计平台开发的设备检修信息管理系统。该系统应用于各种设备的检修基地&#xff0c;通过与基地管理信息系统的连接和数据交换&#xff0c;实现了本地检修工位数据的远程自动化管理&#xff0c;提高了设备的检修效率和安全性。 项目背景 现代设备运维过程中信…
阅读更多...
2024.7.19 作业

2024.7.19 作业

1.链表的排序 int list_sort(NodePtr L) {if(NULLL || L->len<1){printf("排序失败");return -1;}int lenL->len1;NodePtr p;int i,j;for( i1;i<len;i){for( j0,pL;j<len-i;j,pp->next){if( p->data > p->next->data ){datatype tp-&…
阅读更多...
支出这么多？收入从何而来

支出这么多？收入从何而来

大家应该体验过租房小程序、开源字节快速开发平台、开源字节网站、开源字节公众号&#xff0c;开源字节小程序等等这些应用&#xff0c;部署这些软件就需要云服务器与域名&#xff0c;这就涉及到成本问题&#xff0c;这不最近续费了服务器费用与域名费用&#xff0c;又是一比不…
阅读更多...
AES Android IOS H5 加密方案

AES Android IOS H5 加密方案

前景&#xff1a; 1、本项目原有功能RSA客户端对敏感信息进行加密 2、本次漏洞说是服务端返回值有敏感信息&#xff0c;需要密文返回 3、最初只跟H5联调成功&#xff0c;后续APP联调失败(H5和APP的需求排期不一致)&#xff0c;没关注到通用性 方案&#xff1a; 本次方案不…
阅读更多...
【Spark On Hive】—— 基于电商数据分析的项目实战

【Spark On Hive】—— 基于电商数据分析的项目实战

文章目录 Spark On Hive 详解一、项目配置1. 创建工程2. 配置文件3. 工程目录 二、代码实现2.1 Validator2.2 Class SparkFactory2.3 MySQLConfigFactory2.4 测试调用 Spark On Hive 详解 本文基于Spark重构基于Hive的电商数据分析的项目需求&#xff0c;在重构的同时对Spark …
阅读更多...
简约唯美的404HTML源码

简约唯美的404HTML源码

源码介绍 简约唯美的404HTML源码，很适合做网站错误页，将下面的源码放到一个空白的html里面，然后上传到服务器里面即可使用 效果预览 完整源码 <!DOCTYPE html> <html><head><meta charset="utf-8"><title>404 Error Example<…
阅读更多...
【单目3D检测】smoke(1)：模型方案详解

【单目3D检测】smoke(1)：模型方案详解

纵目发表的这篇单目3D目标检测论文不同于以往用2D预选框建立3D信息&#xff0c;而是采取直接回归3D信息&#xff0c;这种思路简单又高效&#xff0c;并不需要复杂的前后处理&#xff0c;而且是一种one stage方法&#xff0c;对于实际业务部署也很友好。 题目&#xff1a;SMOKE&…
阅读更多...
类和对象：赋值函数

类和对象：赋值函数

1.运算符重载 • 当运算符被⽤于类类型的对象时&#xff0c;C语⾔允许我们通过运算符重载的形式指定新的含义。C规定类类型对象使⽤运算符时&#xff0c;必须转换成调⽤对应运算符重载&#xff0c;若没有对应的运算符重载&#xff0c;则会编译报错&#xff1b;&#xff08;运算…
阅读更多...
PCB系统学习（1）--PCB印制电路板

PCB系统学习（1）--PCB印制电路板

PCB印制电路板 1.1PCB的定义1.2PCB的层叠结构1.2.1PCB单层板1.2.2PCB双层板1.2.3PCB四层板 1.3PCB的通孔&#xff0c;盲孔&#xff0c;埋孔1.4元器件的符号与封装1.5PCB的生产过程 1.1PCB的定义 PCB(PrintedCircuitBoard)&#xff0c;中文即印制电路板&#xff0c;或印刷线路板…
阅读更多...
持续集成01--Git版本管理及基础应用实践

持续集成01--Git版本管理及基础应用实践

前言 本系列文章旨在深入探讨持续集成/持续部署&#xff08;Continuous Integration/Continuous Deployment, CI/CD&#xff09;流程中的各个环节&#xff0c;而本篇将聚焦于Git版本管理及其基本应用。通过本文&#xff0c;读者将了解到Git的基本原理、安装配置、基本命令以及如…
阅读更多...
博客前端项目学习day03——框架页

博客前端项目学习day03——框架页

更新router&#xff0c;实现导航栏功能 框架页分为多个部分&#xff0c;头部&#xff0c;头部包含logo以及用户信息&#xff0c;左端是导航栏&#xff0c;右端是导航栏对应的内容 头部如下&#xff0c; 左端是导航栏如下&#xff0c; 框架页代码 <template><div cl…
阅读更多...
windows中使用Jenkins打包,部署vue项目完整操作流程

windows中使用Jenkins打包,部署vue项目完整操作流程

文章目录 1. 下载和安装2. 使用1. 准备一个 新创建 或者 已有的 Vue项目2. git仓库3. 添加Jenkinsfile文件4. 成功示例 1. 下载和安装 网上有许多安装教程,简单罗列几个 Windows系统下Jenkins安装、配置和使用windows安装jenkins 2. 使用 在Jenkins已经安装的基础上,可以开始下…
阅读更多...
2024-07-19 Unity插件 Odin Inspector10 —— Misc Attributes

2024-07-19 Unity插件 Odin Inspector10 —— Misc Attributes

文章目录 1 说明2 其他特性2.1 CustomContextMenu2.2 DisableContextMenu2.3 DrawWithUnity2.4 HideDuplicateReferenceBox2.5 Indent2.6 InfoBox2.7 InlineProperty2.8 LabelText2.9 LabelWidth2.10 OnCollectionChanged2.11 OnInspectorDispose2.12 OnInspectorGUI2.13 OnIns…
阅读更多...
高数知识补充----矩阵、行列式、数学符号

高数知识补充----矩阵、行列式、数学符号

矩阵计算 参考链接&#xff1a;矩阵如何运算&#xff1f;——线性代数_矩阵计算-CSDN博客 行列式计算 参考链接&#xff1a;实用的行列式计算方法 —— 线性代数&#xff08;det&#xff09;_det线性代数-CSDN博客 参考链接&#xff1a;行列式的计算方法(含四种&#xff0c;…
阅读更多...
08.固定宽高比 图片加载失败时的回退方案 隐藏滚动条

08.固定宽高比 图片加载失败时的回退方案 隐藏滚动条

### 固定宽高比 确保具有可变 width 的元素将保持与其 `height 成比例的值。 在 ::before 伪元素上应用 padding-top,使元素的 height 等于其 width 的百分比。height 与 width 的比例可以根据需要进行调整。例如,padding-top 为 100% 将创建一个响应式正方形(1:1 比例)。<…
阅读更多...
＜数据集＞钢铁缺陷检测数据集＜目标检测＞

＜数据集＞钢铁缺陷检测数据集＜目标检测＞

数据集格式&#xff1a;VOCYOLO格式 图片数量&#xff1a;1800张 标注数量(xml文件个数)&#xff1a;1800 标注数量(txt文件个数)&#xff1a;1800 标注类别数&#xff1a;6 标注类别名称&#xff1a;[crazing, patches, inclusion, pitted_surface, rolled-in_scale, scr…
阅读更多...
＜数据集＞铁轨缺陷检测数据集＜目标检测＞

＜数据集＞铁轨缺陷检测数据集＜目标检测＞

数据集格式&#xff1a;VOCYOLO格式 图片数量&#xff1a;844张 标注数量(xml文件个数)&#xff1a;844 标注数量(txt文件个数)&#xff1a;844 标注类别数&#xff1a;3 标注类别名称&#xff1a;[Spalling, Squat, Wheel Burn] 序号类别名称图片数框数1Spalling3315522…
阅读更多...
前端组件化技术实践：Vue自定义顶部导航栏组件的探索

前端组件化技术实践：Vue自定义顶部导航栏组件的探索

摘要 随着前端技术的飞速发展&#xff0c;组件化开发已成为提高开发效率、降低维护成本的关键手段。本文将以Vue自定义顶部导航栏组件为例&#xff0c;深入探讨前端组件化开发的实践过程、优势以及面临的挑战&#xff0c;旨在为广大前端开发者提供有价值的参考和启示。 一、引…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发