CSS3中使用flex和grid实现等高元素布局的示例代码

2025-02-12 05:50
文章标签 代码 实现 使用 布局 元素 示例 frontend css3 grid flex

本文主要是介绍CSS3中使用flex和grid实现等高元素布局的示例代码，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

《CSS3中使用flex和grid实现等高元素布局的示例代码》：本文主要介绍了使用CSS3中的Flexbox和Grid布局实现等高元素布局的方法，通过简单的两列实现、每行放置3列以及全部代码的展示，展示了这两种布局方式的实现细节和效果，详细内容请阅读本文，希望能对你有所帮助...

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

一、简单的两列实现

1、先看页面效果

CSS3中使用flex和grid实现等高元素布局的示例代码

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、还是先看页面效果

CSS3中使用flex和grid实现等高元素布局的示例代码

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>

三、全部代码

CSS3中使用flex和grid实现等高元素布局的示例代码

<!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((www.chinasem.cn100% / 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>
</heapythond>
<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>
      </d编程iv>
    </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">
    www.chinasem.cn  <div class="element">
        <p>松饼冰淇淋小熊软糖。甜苹果派，蛋糕，糖果，胡萝卜蛋糕。糖蛋奶酥，柠檬糖软糖。</p>
      </div>
    </div>
    <div class="column">
      <div class="element">
        <p>蛋奶酥馅饼，柠檬糖，小熊软糖，棒棒糖，甜点，芝麻饼干。提拉米苏粉布丁。蛋糕芝士蛋糕糕点焦糖提拉米苏。</p>
      </div>
    </div>
  </div>
</body>
</html>

到此这篇关于CSS3中使用flex和grid实现等高元素布局的文章就介绍到这了,更多相关css3 flex和grid等高元素布局内容请搜索China编程(www.chinasem.cn)以前的文章或继续浏览下面的相关文章，希望大家以后多多支持编程China编程(www.chinasem.cn)！

这篇关于CSS3中使用flex和grid实现等高元素布局的示例代码的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1153412。

相关文章

Vue3绑定props默认值问题

Vue3绑定props默认值问题

《Vue3绑定props默认值问题》使用Vue3的defineProps配合TypeScript的interface定义props类型,并通过withDefaults设置默认值,使组件能安全访问传入的... 目录前言步骤步骤1：使用 defineProps 定义 Props步骤2：设置默认值总结前言使用T
阅读更多...
Python中logging模块用法示例总结

Python中logging模块用法示例总结

《Python中logging模块用法示例总结》在Python中logging模块是一个强大的日志记录工具,它允许用户将程序运行期间产生的日志信息输出到控制台或者写入到文件中,：本文主要介绍Pyt... 目录前言一. 基本使用1. 五种日志等级2.  设置报告等级3. 自定义格式4. C语言风格的格式化方法
阅读更多...
Python实现精确小数计算的完全指南

Python实现精确小数计算的完全指南

《Python实现精确小数计算的完全指南》在金融计算、科学实验和工程领域,浮点数精度问题一直是开发者面临的重大挑战,本文将深入解析Python精确小数计算技术体系,感兴趣的小伙伴可以了解一下... 目录引言：小数精度问题的核心挑战一、浮点数精度问题分析1.1 浮点数精度陷阱1.2 浮点数误差来源二、基础解决
阅读更多...
Java实现在Word文档中添加文本水印和图片水印的操作指南

Java实现在Word文档中添加文本水印和图片水印的操作指南

《Java实现在Word文档中添加文本水印和图片水印的操作指南》在当今数字时代,文档的自动化处理与安全防护变得尤为重要,无论是为了保护版权、推广品牌,还是为了在文档中加入特定的标识,为Word文档添加... 目录引言Spire.Doc for Java：高效Word文档处理的利器代码实战：使用Java为Wo
阅读更多...
Java中的抽象类与abstract 关键字使用详解

Java中的抽象类与abstract 关键字使用详解

《Java中的抽象类与abstract关键字使用详解》：本文主要介绍Java中的抽象类与abstract关键字使用详解,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧... 目录一、抽象类的概念二、使用 abstract2.1 修饰类 => 抽象类2.2 修饰方法 => 抽象方法，没有
阅读更多...
MyBatis ParameterHandler的具体使用

MyBatis ParameterHandler的具体使用

《MyBatisParameterHandler的具体使用》本文主要介绍了MyBatisParameterHandler的具体使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参... 目录一、概述二、源码1 关键属性2.setParameters3.TypeHandler1.TypeHa
阅读更多...
Spring 中的切面与事务结合使用完整示例

Spring 中的切面与事务结合使用完整示例

《Spring中的切面与事务结合使用完整示例》本文给大家介绍Spring中的切面与事务结合使用完整示例,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考... 目录 一、前置知识：Spring AOP 与 事务的关系 事务本质上就是一个“切面”二、核心组件三、完
阅读更多...
使用docker搭建嵌入式Linux开发环境

使用docker搭建嵌入式Linux开发环境

《使用docker搭建嵌入式Linux开发环境》本文主要介绍了使用docker搭建嵌入式Linux开发环境,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面... 目录1、前言2、安装docker3、编写容器管理脚本4、创建容器1、前言在日常开发全志、rk等不同
阅读更多...
Java实现远程执行Shell指令

Java实现远程执行Shell指令

《Java实现远程执行Shell指令》文章介绍使用JSch在SpringBoot项目中实现远程Shell操作,涵盖环境配置、依赖引入及工具类编写,详解分号和双与号执行多指令的区别... 目录软硬件环境说明编写执行Shell指令的工具类总结jsch(Java Secure Channel)是SSH2的一个纯J
阅读更多...
使用Python实现Word文档的自动化对比方案

使用Python实现Word文档的自动化对比方案

《使用Python实现Word文档的自动化对比方案》我们经常需要比较两个Word文档的版本差异,无论是合同修订、论文修改还是代码文档更新,人工比对不仅效率低下,还容易遗漏关键改动,下面通过一个实际案例... 目录引言一、使用python-docx库解析文档结构二、使用difflib进行差异比对三、高级对比方
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2