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

news2024/11/15 1:45:37

过往的实现方法是使用浮动加计算布局来实现，当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.coloradmin.cn/o/1930545.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

简单爬虫案例

简单爬虫案例

准备工作&#xff1a; 1. 安装好python3 最低为3.6以上&#xff0c; 并成功运行pyhthon3 程序 2. 了解python 多进程原理 3. 了解 python HTTP 请求库 requests 的基本使用 4. 了解正则表达式的用法和python 中 re 库的基本使用 爬取目标 目标网站&#xff1a; https://…
阅读更多...
STM32智能建筑能源管理系统教程

STM32智能建筑能源管理系统教程

目录 引言环境准备智能建筑能源管理系统基础代码实现&#xff1a;实现智能建筑能源管理系统 4.1 数据采集模块 4.2 数据处理与控制模块 4.3 通信与网络系统实现 4.4 用户界面与数据可视化应用场景&#xff1a;能源管理与优化问题解决方案与优化收尾与总结 1. 引言 智能建筑能…
阅读更多...
云计算数据中心（二）

云计算数据中心（二）

目录 三、绿色节能技术&#xff08;一&#xff09;配电系统节能技术&#xff08;二&#xff09;空调系统节能技术&#xff08;三&#xff09;集装箱数据中心节能技术&#xff08;四&#xff09;数据中心节能策略和算法研究&#xff08;五&#xff09;新能源的应用&#xff08;六…
阅读更多...
verilog刷题笔记

verilog刷题笔记

1、选择器实现方式 &#xff08;1&#xff09;case语句&#xff0c;注意default &#xff08;2&#xff09;if-else语言&#xff0c;注意else&#xff0c;有优先级 &#xff08;3&#xff09;三元运算符 &#xff1f; &#xff1a; 2、阻塞赋值/非阻塞赋值都是过程性赋值&a…
阅读更多...
华为od机试真题 — 测试用例执行计划（Python）

华为od机试真题 — 测试用例执行计划（Python）

题目描述 某个产品当前迭代周期内有N个特性&#xff08;F1, F2, ..., FN&#xff09;需要进行覆盖测试&#xff0c;每个特性都被评估了对应的优先级&#xff0c;特性使用其ID作为下标进行标识。 设计了M个测试用例&#xff08;T1, T2,...,TM&#xff09;&#xff0c;每个用例…
阅读更多...
【JavaEE】HTTP协议(1)

【JavaEE】HTTP协议(1)

&#x1f921;&#x1f921;&#x1f921;个人主页&#x1f921;&#x1f921;&#x1f921; &#x1f921;&#x1f921;&#x1f921;JavaEE专栏&#x1f921;&#x1f921;&#x1f921; &#x1f921;&#x1f921;&#x1f921;上一篇文章&#xff1a;【JavaEE】网络原理—…
阅读更多...
入坑树莓派（2）——树莓派4B与手机蓝牙通信

入坑树莓派（2）——树莓派4B与手机蓝牙通信

入坑树莓派（2）——树莓派4B与手机蓝牙通信 1、引言 在入坑树莓派（1）中已经搞掂了可视化问题。现在继续开展下一步，尝试与手机通信，一开始是想弄wifi连接的，但发现基于wifi的APP比较难弄，为了降低开发的难度，又因为树莓派板子自带蓝牙模块，所以直接选用蓝牙连接手机…
阅读更多...
Qt窗口程序整理汇总

Qt窗口程序整理汇总

到今日为止&#xff0c;通过一个个案例的实验&#xff0c;逐步熟悉了 Qt6下 窗体界面开发的&#xff0c;将走过的路&#xff0c;再次汇总整理。 Qt Splash样式的登录窗https://blog.csdn.net/castlooo/article/details/140462768 Qt实现MDI应用程序https://blog.csdn.net/cast…
阅读更多...
昇思25天学习打卡营第16天|Vision Transformer图像分类

昇思25天学习打卡营第16天|Vision Transformer图像分类

本节使用Vision Transfomer完成图像分类 相关知识 Vision Transformer ViT是计算机视觉和自然语言处理两个领域的融合成果。它使用transformer架构来处理图像数据&#xff0c;这种架构原本是用于处理自然语言的。 ViT的主要思想是将图像分割成固定大小的块&#xff08;patch…
阅读更多...
kafka开启kerberos和ACL

kafka开启kerberos和ACL

作者&#xff1a;恩慈 一、部署kafka-KB包 1&#xff0e;上传软件包 依次点击 部署中心----部署组件----上传软件包 选择需要升级的kafka版本并点击确定 2&#xff0e;部署kafka 依次点击部署中心----部署组件----物理/虚拟机部署----选择集群----下一步 选择手动部署-…
阅读更多...
GB28181语音对讲实现

GB28181语音对讲实现

1.前提准备 1.1.首先将设备接入SIP网关服务 我这里使用的是开源的wvp-GB28181-pro项目&#xff0c;首先将设备接入到SIP网关服务。 配置信息如下&#xff1a; 1.2.修改设备配置 设备接入后&#xff0c;会自动注册到平台&#xff0c;可以在国标设备栏看到刚刚注册的设备信息…
阅读更多...
K8S私有云裸金属服务器负载均衡器OpenELB——筑梦之路

K8S私有云裸金属服务器负载均衡器OpenELB——筑梦之路

OpenELB介绍 OpenELB 是一个专为裸机 Kubernetes 集群设计的开源负载均衡器实现。 在云服务环境中的 Kubernetes 集群里&#xff0c;通常可以用云服务提供商提供的负载均衡服务来暴露 Service&#xff0c;但是在本地没办法这样操作。而 OpenELB 可以让用户在裸金属服务器、边缘…
阅读更多...
模块化和包管理工具

模块化和包管理工具

一&#xff0c;模块化 1.定义 将一个复杂的程序文件依据一定规则&#xff08;规范&#xff09;拆分成多个文件的过程称之为 模块化 其中拆分出的 每个文件就是一个模块 &#xff0c;模块的内部数据是私有的&#xff0c;不过模块可以暴露内部数据以便其他模块使用 2.模块化…
阅读更多...
6.Dockerfile及Dockerfile常用指令

6.Dockerfile及Dockerfile常用指令

Dockerfile是构建docker镜像的脚本文件 Dockerfile有很多的指令构成&#xff0c;指令由上到下依次运行。 每一条指令就是一层镜像&#xff0c;层越多&#xff0c;体积就越大&#xff0c;启动速度也越慢 井号开头的行是注释行。指令写大写写小写都行&#xff0c;但一般都写为…
阅读更多...
【Linux】多线程_9

【Linux】多线程_9

文章目录 九、多线程10. 线程池 未完待续 九、多线程 10. 线程池 这里我没实现一些 懒汉单例模式 的线程池&#xff0c;并且包含 日志打印 的线程池&#xff1a; Makefile&#xff1a; threadpool:Main.ccg -o $ $^ -stdc11 -lpthread .PHONY:clean clean:rm -f threadpoolT…
阅读更多...
前端开发常用命令行工具及操作命令（Node.js 和 npm、Yarn、vue、React、Git、Webpack）

前端开发常用命令行工具及操作命令（Node.js 和 npm、Yarn、vue、React、Git、Webpack）

在前端开发中&#xff0c;掌握常用的命令行工具和命令可以大大提高开发效率。接下来将介绍一些常用的前端命令行工具和命令&#xff0c;涵盖从项目初始化到构建和部署的各个环节。 1. Node.js 和 npm 安装 Node.js 和 npm 首先&#xff0c;需要安装 Node.js。安装 Node.js 时…
阅读更多...
FreeRTOS的中断管理、临界资源保护、任务调度

FreeRTOS的中断管理、临界资源保护、任务调度

什么是中断&#xff1f; 简介&#xff1a;让CPU打断正常运行的程序&#xff0c;转而去处理紧急的事件&#xff08;程序&#xff09;&#xff0c;就叫中断。 中断优先级分组设置 ARM Cortex-M 使用了 8 位宽的寄存器来配置中断的优先等级&#xff0c;这个寄存器就是中断优先级…
阅读更多...
硅纪元视角 | 微软开发全新AI模型，革新电子表格处理效率！

硅纪元视角 | 微软开发全新AI模型，革新电子表格处理效率！

在数字化浪潮的推动下&#xff0c;人工智能&#xff08;AI&#xff09;正成为塑造未来的关键力量。硅纪元视角栏目紧跟AI科技的最新发展&#xff0c;捕捉行业动态&#xff1b;提供深入的新闻解读&#xff0c;助您洞悉技术背后的逻辑&#xff1b;汇聚行业专家的见解&#xff0c;…
阅读更多...
在ArcGIS Pro中新建空图层的最快方法

在ArcGIS Pro中新建空图层的最快方法

01常规方法 一般情况下&#xff0c;如果我们想新建一个要素图层&#xff0c;常规方法是&#xff1a; 在目录框中&#xff0c;找一个gdb数据库&#xff0c;右键——新建——要素类&#xff1a; 设置好各种属性&#xff1a; 创建结果如下&#xff1a; 最后将要素类拖入地图中即…
阅读更多...
openeuler 终端中文显示乱码、linux vim中文乱码

openeuler 终端中文显示乱码、linux vim中文乱码

1、解决终端乱码 网上很多教程试了都不生效&#xff0c;以下方法有效&#xff1a; 确认终端支持中文显示&#xff1a; echo $LANG 输出应该包含 UTF-8&#xff0c;例如 en_US.UTF-8。如果不是&#xff0c;您可以通过以下命令设置为 UTF-8&#xff1a; export LANGzh_CN.UTF-8…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023