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

2025-02-12 05:50

本文主要是介绍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

相关文章

Java实现字节字符转bcd编码

《Java实现字节字符转bcd编码》BCD是一种将十进制数字编码为二进制的表示方式,常用于数字显示和存储,本文将介绍如何在Java中实现字节字符转BCD码的过程,需要的小伙伴可以了解下... 目录前言BCD码是什么Java实现字节转bcd编码方法补充总结前言BCD码(Binary-Coded Decima

Vue和React受控组件的区别小结

《Vue和React受控组件的区别小结》本文主要介绍了Vue和React受控组件的区别小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学... 目录背景React 的实现vue3 的实现写法一:直接修改事件参数写法二:通过ref引用 DOMVu

SpringBoot全局域名替换的实现

《SpringBoot全局域名替换的实现》本文主要介绍了SpringBoot全局域名替换的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一... 目录 项目结构⚙️ 配置文件application.yml️ 配置类AppProperties.Ja

Java使用Javassist动态生成HelloWorld类

《Java使用Javassist动态生成HelloWorld类》Javassist是一个非常强大的字节码操作和定义库,它允许开发者在运行时创建新的类或者修改现有的类,本文将简单介绍如何使用Javass... 目录1. Javassist简介2. 环境准备3. 动态生成HelloWorld类3.1 创建CtC

使用Python批量将.ncm格式的音频文件转换为.mp3格式的实战详解

《使用Python批量将.ncm格式的音频文件转换为.mp3格式的实战详解》本文详细介绍了如何使用Python通过ncmdump工具批量将.ncm音频转换为.mp3的步骤,包括安装、配置ffmpeg环... 目录1. 前言2. 安装 ncmdump3. 实现 .ncm 转 .mp34. 执行过程5. 执行结

Python实现批量CSV转Excel的高性能处理方案

《Python实现批量CSV转Excel的高性能处理方案》在日常办公中,我们经常需要将CSV格式的数据转换为Excel文件,本文将介绍一个基于Python的高性能解决方案,感兴趣的小伙伴可以跟随小编一... 目录一、场景需求二、技术方案三、核心代码四、批量处理方案五、性能优化六、使用示例完整代码七、小结一、

Java实现将HTML文件与字符串转换为图片

《Java实现将HTML文件与字符串转换为图片》在Java开发中,我们经常会遇到将HTML内容转换为图片的需求,本文小编就来和大家详细讲讲如何使用FreeSpire.DocforJava库来实现这一功... 目录前言核心实现:html 转图片完整代码场景 1:转换本地 HTML 文件为图片场景 2:转换 H

Java使用jar命令配置服务器端口的完整指南

《Java使用jar命令配置服务器端口的完整指南》本文将详细介绍如何使用java-jar命令启动应用,并重点讲解如何配置服务器端口,同时提供一个实用的Web工具来简化这一过程,希望对大家有所帮助... 目录1. Java Jar文件简介1.1 什么是Jar文件1.2 创建可执行Jar文件2. 使用java

C#使用Spire.Doc for .NET实现HTML转Word的高效方案

《C#使用Spire.Docfor.NET实现HTML转Word的高效方案》在Web开发中,HTML内容的生成与处理是高频需求,然而,当用户需要将HTML页面或动态生成的HTML字符串转换为Wor... 目录引言一、html转Word的典型场景与挑战二、用 Spire.Doc 实现 HTML 转 Word1

C#实现一键批量合并PDF文档

《C#实现一键批量合并PDF文档》这篇文章主要为大家详细介绍了如何使用C#实现一键批量合并PDF文档功能,文中的示例代码简洁易懂,感兴趣的小伙伴可以跟随小编一起学习一下... 目录前言效果展示功能实现1、添加文件2、文件分组(书签)3、定义页码范围4、自定义显示5、定义页面尺寸6、PDF批量合并7、其他方法