使用现代 CSS 构建响应式等高卡片（Flexbox 的魔力和无媒体查询）

首页 > 编程 > 使用现代 CSS 构建响应式等高卡片（Flexbox 的魔力和无媒体查询）

使用现代 CSS 构建响应式等高卡片（Flexbox 的魔力和无媒体查询）

发布于2024-07-31

Building Responsive, Equal-Height Cards with Modern CSS (Magic of Flexbox & No Media Queries)

Title one
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod, aliquid ex vel labore fugit dignissimos libero eos hic, fuga, vitae consequuntur quidem.
    
  
Title two
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magnam aperiam consequuntur, saepe at repellat nobis.
    
  
Title three
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum reprehenderit at cumque? Architecto numquam nam placeat suscipit!

使用现代 CSS 添加样式

重置 CSS

/* Basic CSS Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

身体

/* Ensure that our layout is centred horizontally and vertically on the page */
body {
    display: flex; /* using CSS flexbox to vertically and horizontally centre all cards */
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow-x: hidden; /* Prevent horizontal scrolling */
}

使用 Flexbox 设计卡片布局

/* Cards */
.card-container {
    display: flex; /* using CSS flexbox to display each card at the centre */
    justify-content: center;
    align-items: stretch; /* use stretch for equal height of all cards */
    gap: 1.5625rem; /* add space between each card */
    flex-wrap: wrap;
    padding: 1rem; 
    max-width: 100%; /* Prevent container from exceeding viewport width */
}

.card {
    display: flex;
    flex-direction: column;
    width: 20rem;
    background-color: #fff;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.4);
    text-align: center;
    text-wrap: balance; /* ensures content is evenly distributed across multiple lines for better readability. */
    overflow: hidden;
}

设置卡片内部内容的样式

设置卡片图像的样式

.card-image {
    width: 100%;
    height: auto;
    object-fit: cover;
    margin-bottom: 0.85rem;
}

设置卡片内容的样式

.card-title {
    font-size: 1.25rem;
    padding: 1rem;
    color: #3ca69f;
}

.card-description {
    flex-grow: 1; /* allow the content to take available space, thus maintaining equal height no matter the length of the content */
    padding: 0 1rem 1rem;
    font-size: 0.975rem;
    line-height: 1.5;
}

设置卡片按钮的样式

/* Cards button */
.card-button {
    align-self: center; /* placing the button at the center */
    margin: 1rem 0 3rem;
    padding: 0.625rem 1rem;
    font-size: 1rem;
    color: #ffffff;
    background-color: #3ca69f;
    border: none;
    border-radius: 0.3125rem;
    cursor: pointer;
}

添加悬停过渡

.card {
    transition: 0.5s ease all;
}

.card-button {
    transition: 0.5s ease all;
}

/* cards hover effect */
.card:hover {
    background-color: #276662;
    color: #ffffff;
}

.card:hover > .card-button {
    background-color: #ffffff;
    color: #276662;
    font-weight: 700;
}

.card:hover > .card-title {
    color: #ffffff;
}

使用 CSS 变量

/* Declare variables */
:root {
    --primary-color: #3ca69f;
    --secondary-color: #276662;
    --text-color: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.4);
    --border-radius: 0.3125rem;
    --spacing: 1rem;
    --transition-duration: 0.5s;
}

结论

将所有内容放在一起

返回顶部

版本声明本文转载于：https://dev.to/jennavisions/building-responsive-equal-height-cards-with-modern-css-magic-of-flexbox-no-media-queries-2h0b?1如有侵犯，请联系[email protected]删除

最新教程更多>

Hexabot 设置和可视化编辑器教程：构建您的第一个 AI 聊天机器人
聊天机器人爱好者大家好！在本教程中，我们将指导您完成设置和使用开源 AI 聊天机器人构建器 Hexabot 的过程。我们将首先克隆 GitHub 存储库、安装依赖项并为 Hexabot 配置环境变量。您还将学习如何使用 Docker 启动项目、访问管理面板以及使用可视化编辑器创建聊天机器人流程。在...

编程发布于2024-11-02
mysql_fetch_row()、mysql_fetch_assoc() 和 mysql_fetch_array()：您应该选择哪一个？
mysql_fetch_row()、mysql_fetch_assoc() 和 mysql_fetch_array() 解释背景：如果您正在使用已弃用的MySQL 扩展中，在从结果集中检索数据的 mysql_fetch_row()、mysql_fetch_assoc() 和 mysql_fetch_...

编程发布于2024-11-02
Next.js - 概述
本文作为初学者友好的指南和使用 Next.js 的步骤。 Next.js 是一个用于构建 Web 应用程序的灵活框架。相反，它是一个构建在 Node.js 之上的 React 框架。设置您的 Next.js 项目要启动新的 Next.js 项目，您需要在计算机上安装 Node.js。安装安装...

编程发布于2024-11-02
如何在代码中使用 Unsplash 图片
作为一名从事新 SaaS 项目的开发人员，我需要直接通过 URL 链接一些 Unsplash 图像。最初，我看到一篇推荐使用 https://source.unsplash.com/ API 的文章（链接）。但是，此方法不再有效，并且仅从 URL 字段复制链接并不能提供嵌入所需的直接图像 URL...

编程发布于2024-11-02
如何合并关联数组、处理缺失键以及填充默认值？
合并多个关联数组并添加具有默认值的缺失列将关联数组与不同的键集组合起来创建统一的数组可能具有挑战性。这个问题探索了一种实现此目的的方法，所需的输出是一个数组，其中键被合并，缺失的列用默认值填充。为了实现这一点，建议结合使用 array_merge 函数精心设计的键数组：$keys = array()...

编程发布于2024-11-02
通过 testcontainers-go 和 docker-compose 来利用您的测试套件
Welcome back, folks! Today, we will cover the end-to-end tests in an intriguing blog post. If you've never written these kinds of tests or if you stri...

编程发布于2024-11-02
以下是一些适合您文章的基于问题的标题： **直接简洁：** * **如何在Windows控制台中正确显示UTF-8字符？** * **为什么传统方法无法显示
在 Windows 控制台中正确显示 UTF-8 字符使用传统方法在 Windows 控制台中显示 UTF-8 字符的许多尝试均失败正确渲染扩展字符。失败的尝试：使用 MultiByteToWideChar() 和 wprintf() 的一种常见方法被证明是无效的，只留下 ASCII 字符可见。此外...

编程发布于2024-11-02
ReactJS 的模拟介绍
ReactJS 19：重要部分并发模式增强： ReactJS 19 中最大的改进是并发模式，它不仅在应用程序自身更新时保持 UI 平滑和响应灵敏，而且还确保了无缝界面，尤其是在复杂的过渡（例如动画）时。改进的服务器组件：在 Python 的引领下，ReactJ...

编程发布于2024-11-02
首届DEV网页游戏挑战赛评委
我被要求对DEV团队9月份组织的第一届网页游戏挑战赛提交的参赛作品进行评判，结果在10月初发布。我们几个月来一直在 DEV 上组织挑战（迷你黑客马拉松），并计划宣布我们的第一个网页游戏挑战。鉴于您在游戏社区和 dev.to 的专业知识和参与度，我们想知道您是否有兴趣成为客座评委。谁能对此说“不...

编程发布于2024-11-02
购买经过验证的现金应用程序帐户：安全可靠的交易
Buying verified Cash App accounts is not recommended. It can lead to security risks and potential account bans. If you want to more information just k...

编程发布于2024-11-02
为什么 `std::function` 缺乏相等比较？
揭开 std::function 的等式可比性之谜难题：为什么是 std::function,现代 C 代码库的一个组成部分，不具备相等比较功能？这个问题从一开始就困扰着程序员，导致管理可调用对象集合的混乱和困难。早期的歧义：在 C 语言的早期草案中11 标准中，operator== 和operat...

编程发布于2024-11-02
JavaScript 类型检查 |编程教程
介绍本文涵盖以下技术技能：在本实验中，我们将探索一个 JavaScript 函数，该函数检查提供的值是否属于指定类型。我们将使用 is() 函数，它利用构造函数属性和 Array.prototype.includes() 方法来确定值是否属于指定类型。本实验将帮助您更好地了解 ...

编程发布于2024-11-02
使用 Streamlit 将机器学习模型部署为 Web 应用程序
介绍机器学习模型本质上是一组用于进行预测或查找数据模式的规则或机制。简单地说（不用担心过于简单化），在 Excel 中使用最小二乘法计算的趋势线也是一个模型。然而，实际应用中使用的模型并不那么简单——它们通常涉及更复杂的方程和算法，而不仅仅是简单的方程。在这篇文章中，我将首先构...

编程发布于2024-11-02
## utf8_unicode_ci 与 utf8_bin：哪种 MySQL 排序规则最适合德国网站？
为德语选择最佳 MySQL 排序规则在设计为德语受众量身定制的网站时，支持像 ä、 ü 和 ß。当涉及特定于语言的要求时，排序规则的选择起着重要作用。字符集和排序规则对于字符处理，UTF-8 仍然是首选选项，提供广泛的字符支持。至于排序规则，需要考虑德语特定字符。排序规则类型MySQL 提供各种排序...

编程发布于2024-11-02
异常处理基础知识
Java中的异常处理由五个关键字管理：try、catch、 throw、throws和finally。这些关键字构成了一个相互关联的子系统。要监视的指令位于 try 块内。如果try块中发生异常，则会抛出异常。代码可以使用catch捕获并处理异常。系统异常由Java运行时自动抛出。要手...

编程发布于2024-11-02