当前位置：首页 > news >正文

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

news 2026/4/3 9:26:16

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

【学习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: 2…...

编程日记 2024/7/17 4:52:03

如何防止Eclipse格式化程序在行注释开头插入空格

格式化前： //foo bar 格式化后： // foo bar 这种看着不是很舒服。如果不让格式化时自动在注释符后面插入空格呢？ 要在Eclipse中进行代码格式化时防止在行注释（‌//）‌后面自动增加空格，‌可以通过调整…...

编程日记 2024/7/17 4:51:02

Nextjs 调用组件内的方法

在 Next.js 中，如果你想从一个组件外部调用组件内部的方法，可以使用 React 的 useRef 钩子来引用组件实例并调用其方法。这种方法主要适用于类组件，但也可以用于函数组件，通过将方法暴露在 ref 对象上。以下是一个示例&#xff…...

编程日记 2024/7/17 4:49:00

ip地址是电脑还是网线决定的

在数字化时代的浪潮中，网络已经成为了我们日常生活和工作不可或缺的一部分。当我们谈论网络时，IP地址无疑是一个核心的概念。然而，关于IP地址的分配和决定因素，很多人可能存在误解。有些人认为IP地址是由电脑决定的，而…...

编程日记 2024/7/17 4:47:59

Hadoop中HDFS、Hive 和 HBase三者之间的关系

HDFS（Hadoop Distributed File System）、Hive 和 HBase 是 Hadoop 生态系统中三个重要的组件，它们各自解决了大数据存储和处理的不同层面的问题。我们用大白话来解释这三个组件之间的关系： HDFS - 数据的仓库： HDFS 是…...

编程日记 2024/7/17 4:46:58

opencv—常用函数学习_“干货“_10

目录二七、离散余弦变换执行离散余弦变换 (dct) 和逆变换 (idct) 解释实际应用 JPEG压缩示例（简化版） 二八、图像几何变换仿射变换 (warpAffine 和 getAffineTransform) 透视变换 (warpPerspective 和 getPerspectiveTransform) 旋转变换 (g…...

编程日记 2024/7/17 4:45:57

Jmeter二次开发Demo

Jmeter二次开发Demo 前言在上一集，我们已经完成了JMX脚本的分析，大致了解了JMX脚本的基本元素。那么在这一集，我们将会介绍一下Jmeter二次开发的Demo。 Demo代码那么话不多说，我们就直接上代码。 public class TestStress…...

编程日记 2024/7/17 4:44:56

MongoDB综合实战篇（超容易）

一、题目引入在MongoDB的gk集合里插入以下数据： 用语句完成如下功能： （1）查询张三同学的成绩信息 （2）查询李四同学的语文成绩 （3）查询没有选化学的同学 （4&#xf…...

编程日记 2024/7/17 4:43:55

框架设计MVVM

重点： 1.viewmodel 包含model 2.view包含viewmodel,通过驱动viewmodel去控制model的数据和业务逻辑 // Test.cpp : 此文件包含 "main" 函数。程序执行将在此处开始并结束。 //#include <iostream> #include <vector>using namespace std;#p…...

编程日记 2024/7/17 4:42:54

RK3399基础部分

1.RK3399介绍基础特性： 高达1.8GHz的双核Cortex-A72 四核Cortex-A53高达1.4GHz NPU高达3.0TOPS Mali-T860MP4 GPU 双通道DDR3/DDR3L/LPDDR3/LPDDR4 4K超高清H265/H264/VP9 HDR10/HLG H264编码器双MIPI CSI和ISP USB Type-CGPU: 图形处理器（英语&…...

编程日记 2024/7/17 4:38:49

linux高级编程（广播与组播）

广播与组播： 广播： 局域网，一个人发所有人都能收（服务器找客户端），（发给路由器的广播地址后后路由器自动给所有人发，可用于服务器找客户端） 只能udp来做 setsocketopt…...

编程日记 2024/7/17 4:33:45

Andriod Stdio新建Kotlin的Jetpack Compose简单项目

1.选择 No Activity 2.选择kotlin 4.右键选择在目录MyApplication下 New->Compose->Empty Project 出现下面的画面 Finish 完成...

编程日记 2024/7/17 4:30:41

Linux多线程编程-哲学家就餐问题详解与实现（C语言）

在哲学家就餐问题中，假设有五位哲学家围坐在圆桌前，每位哲学家需要进行思考和进餐两种活动。他们的思考不需要任何资源，但进餐需要使用两根筷子（左右两侧各一根）。筷子是共享资源，哲学家们在进行进餐时需要…...

编程日记 2024/7/17 4:27:38

从C向C++18——演讲比赛流程管理系统

一.项目需求 1.比赛规则学校举行一场演讲比赛，共有12个人参加。比赛共两轮，第一轮为淘汰赛，第二轮为决赛。每名选手都有对应的编号，如 10001~ 10012比赛方式：分组比赛，每组6个人；第一轮分为两…...

编程日记 2024/7/17 4:26:36

QThread和std::thread

在 Qt 中， 我们经常会用到多线程，这时候就需要纠结是使用 Qt 的 QThread 还是使用 C 标准库的 std::thread。这里记录一下我自己的理解，先介绍一下 QThread 和 std::thread 的使用方法，对比一下他们的不同，最后说一下…...

编程日记 2024/7/17 4:24:33

LeetCode 算法：组合总和 c++

原题链接🔗：组合总和难度：中等⭐️⭐️ 题目给你一个无重复元素的整数数组 candidates 和一个目标整数 target ，找出 candidates 中可以使数字和为目标数 target 的所有不同组合 ，并以列表形式返回。你可以按 …...

编程日记 2024/7/17 4:23:32

【两大3D转换SDK对比】HOOPS Exchange VS. CAD Exchanger

在现代工业和工程设计领域，CAD数据转换工具是确保不同软件系统间数据互通的关键环节。HOOPS Exchange和CAD Exchanger是两款备受关注的工具，它们在功能、支持格式、性能和应用场景等方面有着显著差异。本文将从背景、支持格式、功能和性能、应用场景等…...

编程日记 2024/7/17 4:22:31

Openerstry + lua + redis根据请求参数实现动态路由转发

文章目录一、需求分析二、准备1、软件安装2、redis-lua封装优化三、实现1、nginx.conf2、dynamic.lua注意 3、准备两个应用4、访问nginx 四、参数直接传要代理的地址端口一、需求分析根据用户访问url的参数，将请求转发到对应指定IP的服务器上。二、准备 1、…...

编程日记 2024/7/17 4:21:30

数字名片-Pushmall 智能AI数字名片7月更新计划

[数字名片]-商务营销推广助手7月更新计划数字名片-商务营销推广助手7月更新计划 **2024年 6月完成模块开发优化****实现SaaS框架业务 1、智能名片：创建个人名片、企业名片、商机管理。 2、人脉商圈：附近人脉、就近群脉、好友名片。 3、企微社群&…...

编程日记 2024/7/17 4:17:26

21. Python代码快速查看数组分布

1. 前言当你已经具备一段可用于快速查看数组分布的Python代码时，你拥有了一项强大的工具来分析和理解你的数据集。这种类型的代码通常会使用可视化库，例如Matplotlib和Seaborn，以直观的方式展示数据分布。这些库允许你创建直方图以观察数据集中的频率分布，以及核密度估计…...

编程日记 2024/7/17 4:15:24

intv_ai_mk11真实案例分享：中小企业如何用该模型降本提效做内容生产

intv_ai_mk11真实案例分享：中小企业如何用该模型降本提效做内容生产 1. 中小企业内容生产的痛点与机遇在当今内容为王的时代，中小企业面临着巨大的内容生产压力。每天需要产出大量文案、产品介绍、营销内容、客服回复等，但往往受限于人力成…...

编程新知 2026/4/3 7:56:41

卷积神经网络（CNN）原理可视化解释：Phi-4-mini-reasoning担任AI讲师

卷积神经网络（CNN）原理可视化解释：Phi-4-mini-reasoning担任AI讲师 1. 当AI成为你的机器学习导师想象一下，有位从不疲倦的讲师，能用最生动的比喻解释复杂的算法原理，还能实时生成配套示意图——这就是Ph…...

编程新知 2026/4/3 7:18:26

LeaguePrank：英雄联盟段位修改与个性化展示完全指南

LeaguePrank：英雄联盟段位修改与个性化展示完全指南【免费下载链接】LeaguePrank 项目地址: https://gitcode.com/gh_mirrors/le/LeaguePrank 想要在英雄联盟客户端中展示与众不同的段位和个性化信息吗？LeaguePrank 正是你需要的工具。这款开源…...

编程新知 2026/4/3 7:10:13

Qt图形界面开发集成AI：SmallThinker-3B-Preview实现智能桌面应用

Qt图形界面开发集成AI：SmallThinker-3B-Preview实现智能桌面应用你是不是也想过，能不能把现在这些厉害的AI能力，直接塞进我们自己写的桌面软件里？比如，在写代码的时候，旁边就有一个能解释复杂代码片段的助…...

编程新知 2026/4/3 6:35:39

AI 时代做自媒体，他从方法论上就赢了绝大部分人

AI 时代做自媒体，他从方法论上就赢了绝大部分人昨天刷到卡兹克的一篇文章，他分享了自己做内容三年总结的 10 条方法论。看完之后我的感受是：这哥们从方法论上就赢了。简单介绍一下卡兹克。他的公众号「数字生命卡兹克」是 AIGC 领域的头部 IP，新榜 AI 行业公众号排名…...

编程新知 2026/4/3 6:05:04

LTE CDRX配置优化与日志解析实战

1. LTE CDRX功能基础与核心参数解析 CDRX（Connected Mode DRX）是LTE网络中终端设备在连接状态下实现节能的关键技术。想象一下你的手机就像个熬夜加班的程序员，如果一直盯着电脑屏幕（持续监听网络信号），电量…...

编程新知 2026/4/3 6:03:03

Ostrakon-VL 提示词（Prompt）工程高级技巧：控制输出格式与风格

Ostrakon-VL 提示词（Prompt）工程高级技巧：控制输出格式与风格 1. 引言：为什么需要掌握Prompt工程？ 如果你用过Ostrakon-VL这类多模态大模型，可能遇到过这样的困扰：明明输入了很详细的描述&…...

编程新知 2026/4/3 5:54:59

市场上有哪些做专精特新，创新型中小企业。企业老顾客选择多

在当今经济发展格局中，专精特新，创新型中小企业正成为推动经济创新发展的重要力量。那市场上有哪些这样的企业深受老顾客青睐呢？市场热门企业类型行业报告显示，在高端装备制造、电子信息、生物医药等领域，有不少专精特…...

编程新知 2026/4/3 5:40:49

OpenClaw家庭相册：Qwen3.5-9B-VL自动识别人物与场景分类

OpenClaw家庭相册：Qwen3.5-9B-VL自动识别人物与场景分类 1. 为什么需要智能相册管理作为一个摄影爱好者和两个孩子的父亲，我的手机和硬盘里堆积了超过5万张家庭照片。每次想找特定场景（比如"去年夏天在海边的全家福"&#xff09…...

编程新知 2026/4/3 3:06:33

飞书机器人自动化：OpenClaw调用Qwen3-4B实现会议纪要生成

飞书机器人自动化：OpenClaw调用Qwen3-4B实现会议纪要生成 1. 为什么选择OpenClawQwen3-4B做会议纪要上个月我经历了连续三天的跨部门会议，每天手动整理会议纪要到深夜的痛苦让我开始寻找自动化解决方案。试过几款SaaS工具后，发现要么需要上…...

编程新知 2026/4/3 2:27:49

一、简单的两列实现

1、先看页面效果

2、css代码

3、html代码

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

1、还是先看页面效果

2、css代码

3、html代码

三、全部代码

相关文章：