使用现代 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]删除

最新教程更多>

$在Ubuntu/linux上安装mysql-python时，如何修复\“ mysql_config \”错误？$
在Ubuntu/linux上安装mysql-python时，如何修复\“ mysql_config \”错误？
mysql-python安装错误：“ mysql_config找不到”“ 由于缺少MySQL开发库而出现此错误。解决此问题，建议在Ubuntu上使用该分发的存储库。使用以下命令安装Python-MysqldB： sudo apt-get安装python-mysqldb sudo pip in...

编程发布于2025-05-08
如何从PHP中的Unicode字符串中有效地产生对URL友好的sl。
为有效的slug生成首先，该函数用指定的分隔符替换所有非字母或数字字符。此步骤可确保slug遵守URL惯例。随后，它采用ICONV函数将文本简化为us-ascii兼容格式，从而允许更广泛的字符集合兼容性。接下来，该函数使用正则表达式删除了不需要的字符，例如特殊字符和空格。此步骤可确保slug仅包含...

编程发布于2025-05-08
如何在其容器内为DIV创建平滑的左右CSS动画？
通用CSS动画，用于左右运动，我们将探索创建一个通用的CSS动画，以向左和右移动DIV，从而到达其容器的边缘。该动画可以应用于具有绝对定位的任何div，无论其未知长度如何。问题：使用左直接导致瞬时消失更加流畅的解决方案：混合转换和左 [并实现平稳的，线性的运动，我们介绍了线性的转换。这...

编程发布于2025-05-08
Python中何时用"try"而非"if"检测变量值？
使用“ try“ vs.” if”来测试python 在python中的变量值，在某些情况下，您可能需要在处理之前检查变量是否具有值。在使用“如果”或“ try”构建体之间决定。“ if” constructs result = function（）如果结果：对于结果： ...

编程发布于2025-05-08
C++中如何将独占指针作为函数或构造函数参数传递？
在构造函数和函数中将唯一的指数管理为参数 unique pointers（ unique_ptr [2启示。通过值： base（std :: simelor_ptr n）：next（std :: move（n））{} 此方法将唯一指针的所有权转移到函数/对象。指针的内容被移至功能中，在操作...

编程发布于2025-05-08
哪种在JavaScript中声明多个变量的方法更可维护？
在JavaScript中声明多个变量：探索两个方法在JavaScript中，开发人员经常遇到需要声明多个变量的需要。对此的两种常见方法是：在单独的行上声明每个变量：当涉及性能时，这两种方法本质上都是等效的。但是，可维护性可能会有所不同。第一个方法被认为更易于维护。每个声明都是其自己的语句，使其...

编程发布于2025-05-08
如何将MySQL数据库添加到Visual Studio 2012中的数据源对话框中？
在Visual Studio 2012 尽管已安装了MySQL Connector v.6.5.4，但无法将MySQL数据库添加到实体框架的“ DataSource对话框”中。为了解决这一问题，至关重要的是要了解MySQL连接器v.6.5.5及以后的6.6.x版本将提供MySQL的官方Visual...

编程发布于2025-05-08
CSS强类型语言解析
您可以通过其强度或弱输入的方式对编程语言进行分类的方式之一。在这里，“键入”意味着是否在编译时已知变量。一个例子是一个场景，将整数（1）添加到包含整数（“ 1”）的字符串： result = 1 "1";包含整数的字符串可能是由带有许多运动部件的复杂逻辑套件无意间生成的。它也可以是故意从单个真理...

编程发布于2025-05-08
为什么不````''{margin：0; }`始终删除CSS中的最高边距？
在CSS 问题：不正确的代码：全球范围将所有余量重置为零，如提供的代码所建议的，可能会导致意外的副作用。解决特定的保证金问题是更建议的。例如，在提供的示例中，将以下代码添加到CSS中，将解决余量问题： body H1 { 保证金顶：-40px; } 此方法更精确，避免了由全局保证金重置引...

编程发布于2025-05-08
PHP阵列键值异常：了解07和08的好奇情况
PHP数组键值问题，使用07&08 在给定数月的数组中，键值07和08呈现令人困惑的行为时，就会出现一个不寻常的问题。运行print_r（$月）返回意外结果：键“ 07”丢失，而键“ 08”分配给了9月的值。此问题源于PHP对领先零的解释。当一个数字带有0（例如07或08）的前缀时，PHP将其...

编程发布于2025-05-08
$\“（1）vs.（;;）：编译器优化是否消除了性能差异？\”$
\“（1）vs.（;;）：编译器优化是否消除了性能差异？\”
答案：在大多数现代编译器中，while（1）和（1）和（;;）之间没有性能差异。编译器： perl： 1 输入 - > 2 2 NextState（Main 2 -E：1）V-> 3 9 Leaveloop VK/2-> A 3 toterloop（next-> 8 last-> 9 ...

编程发布于2025-05-08
如何在Java字符串中有效替换多个子字符串？
在java 中有效地替换多个substring，需要在需要替换一个字符串中的多个substring的情况下，很容易求助于重复应用字符串的刺激力量。 However, this can be inefficient for large strings or when working with nu...

编程发布于2025-05-08
`console.log`显示修改后对象值异常的原因
foo = [{id：1}，{id：2}，{id：3}，{id：4}，{id：id：5}，]，]; console.log（'foo1'，foo，foo.length）; foo.splice（2，1）; console.log('foo2', foo, foo....

编程发布于2025-05-08
使用jQuery如何有效修改":after"伪元素的CSS属性？
在jquery中了解伪元素的限制：访问“ selector 尝试修改“：”选择器的CSS属性时，您可能会遇到困难。 This is because pseudo-elements are not part of the DOM (Document Object Model) and are th...

编程发布于2025-05-08
您可以使用CSS在Chrome和Firefox中染色控制台输出吗？
在javascript console 中显示颜色是可以使用chrome的控制台显示彩色文本，例如红色的redors，for for for for错误消息？回答是的，可以使用CSS将颜色添加到Chrome和Firefox中的控制台显示的消息（版本31或更高版本）中。要实现这一目标，请使用以下模...

编程发布于2025-05-08