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。

相关文章

利用c++判断水仙花数并输出示例代码

利用c++判断水仙花数并输出示例代码

《利用c++判断水仙花数并输出示例代码》水仙花数是指一个三位数,其各位数字的立方和恰好等于该数本身,：本文主要介绍利用c++判断水仙花数并输出的相关资料,文中通过代码介绍的非常详细,需要的朋友可以... 以下是使用C++实现的相同逻辑代码：#include <IOStream>#include <vec
阅读更多...
基于C++的UDP网络通信系统设计与实现详解

基于C++的UDP网络通信系统设计与实现详解

《基于C++的UDP网络通信系统设计与实现详解》在网络编程领域,UDP作为一种无连接的传输层协议,以其高效、低延迟的特性在实时性要求高的应用场景中占据重要地位,下面我们就来看看如何从零开始构建一个完整... 目录前言一、UDP服务器UdpServer.hpp1.1 基本框架设计1.2 初始化函数Init详解
阅读更多...
Java中Map的五种遍历方式实现与对比

Java中Map的五种遍历方式实现与对比

《Java中Map的五种遍历方式实现与对比》其实Map遍历藏着多种玩法,有的优雅简洁,有的性能拉满,今天咱们盘一盘这些进阶偏基础的遍历方式,告别重复又臃肿的代码,感兴趣的小伙伴可以了解下... 目录一、先搞懂：Map遍历的核心目标二、几种遍历方式的对比1. 传统EntrySet遍历（最通用）2. Lambd
阅读更多...
SQL Server 中的表进行行转列场景示例

SQL Server 中的表进行行转列场景示例

《SQLServer中的表进行行转列场景示例》本文详细介绍了SQLServer行转列（Pivot）的三种常用写法,包括固定列名、条件聚合和动态列名,文章还提供了实际示例、动态列数处理、性能优化建议... 目录一、常见场景示例二、写法 1：PIVOT（固定列名）三、写法 2：条件聚合（CASE WHEN）四、
阅读更多...
springboot+redis实现订单过期(超时取消)功能的方法详解

springboot+redis实现订单过期(超时取消)功能的方法详解

《springboot+redis实现订单过期(超时取消)功能的方法详解》在SpringBoot中使用Redis实现订单过期（超时取消）功能,有多种成熟方案,本文为大家整理了几个详细方法,文中的示例代... 目录一、Redis键过期回调方案（推荐）1. 配置Redis监听器2. 监听键过期事件3. Redi
阅读更多...
C#中checked关键字的使用小结

C#中checked关键字的使用小结

《C#中checked关键字的使用小结》本文主要介绍了C#中checked关键字的使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学... 目录✅ 为什么需要checked？ 问题：整数溢出是“静默China编程”的（默认）checked的三种用
阅读更多...
SpringBoot全局异常拦截与自定义错误页面实现过程解读

SpringBoot全局异常拦截与自定义错误页面实现过程解读

《SpringBoot全局异常拦截与自定义错误页面实现过程解读》本文介绍了SpringBoot中全局异常拦截与自定义错误页面的实现方法,包括异常的分类、SpringBoot默认异常处理机制、全局异常拦... 目录一、引言二、Spring Boot异常处理基础2.1 异常的分类2.2 Spring Boot默
阅读更多...
C#中预处理器指令的使用小结

C#中预处理器指令的使用小结

《C#中预处理器指令的使用小结》本文主要介绍了C#中预处理器指令的使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录 第 1 名：#if/#else/#elif/#endif✅用途：条件编译（绝对最常用！） 典型场景： 示例
阅读更多...
基于SpringBoot实现分布式锁的三种方法

基于SpringBoot实现分布式锁的三种方法

《基于SpringBoot实现分布式锁的三种方法》这篇文章主要为大家详细介绍了基于SpringBoot实现分布式锁的三种方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、基于Redis原生命令实现分布式锁1. 基础版Redis分布式锁2. 可重入锁实现二、使用Redisso
阅读更多...
SpringBoo WebFlux+MongoDB实现非阻塞API过程

SpringBoo WebFlux+MongoDB实现非阻塞API过程

《SpringBooWebFlux+MongoDB实现非阻塞API过程》本文介绍了如何使用SpringBootWebFlux和MongoDB实现非阻塞API,通过响应式编程提高系统的吞吐量和响应性能... 目录一、引言二、响应式编程基础2.1 响应式编程概念2.2 响应式编程的优势2.3 响应式编程相关技术
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2