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

最新教程更多>

Go web应用何时关闭数据库连接？
在GO Web Applications中管理数据库连接很少，考虑以下简化的web应用程序代码：出现的问题：何时应在DB连接上调用Close（）方法？，该特定方案将自动关闭程序时，该程序将在EXITS EXITS EXITS出现时自动关闭。但是，其他考虑因素可能保证手动处理。选项1：隐式关闭终止数...

编程发布于2025-06-27
如何有效地选择熊猫数据框中的列？
在处理数据操作任务时，在Pandas DataFrames 中选择列时，选择特定列的必要条件是必要的。在Pandas中，选择列的各种选项。选项1：使用列名如果已知列索引，请使用ILOC函数选择它们。请注意，python索引基于零。 df1 = df.iloc [：，0：2]＃使用索引0和1 的 ...

编程发布于2025-06-27
C++成员函数指针正确传递方法
如何将成员函数置于c 的函数时，接受成员函数指针的函数时，必须同时提供对象的指针，并提供指针和指针到函数。需要具有一定签名的功能指针。要通过成员函数，您需要同时提供对象指针（此）和成员函数指针。这可以通过修改Menubutton :: SetButton（）（如下所示：[&& && && &&华）...

编程发布于2025-06-27
在UTF8 MySQL表中正确将Latin1字符转换为UTF8的方法
在UTF8表中将latin1字符转换为utf8 ，您遇到了一个问题，其中含义的字符（例如，“jáuòiñe”）在utf8 table tabled tablesset中被extect（例如，“致电。为了解决此问题，您正在尝试使用“ mb_convert_encoding”和“ iconv”转换受...

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

编程发布于2025-06-27
Python元类工作原理及类创建与定制
python中的metaclasses是什么？ Metaclasses负责在Python中创建类对象。就像类创建实例一样，元类也创建类。他们提供了对类创建过程的控制层，允许自定义类行为和属性。在Python中理解类作为对象的概念，类是描述用于创建新实例或对象的蓝图的对象。这意味着类本身是使用类关...

编程发布于2025-06-27
Java数组中元素位置查找技巧
在Java数组中检索元素的位置利用Java的反射API将数组转换为列表中，允许您使用indexof方法。（primitives）（链接到Mishax的解决方案）用于排序阵列的数组此方法此方法返回元素的索引，如果发现了元素的索引，或一个负值，指示应放置元素的插入点。

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

编程发布于2025-06-27
C++20 Consteval函数中模板参数能否依赖于函数参数？
[ consteval函数和模板参数依赖于函数参数在C 17中，模板参数不能依赖一个函数参数，因为编译器仍然需要对非contexexpr futcoriations contim at contexpr function进行评估。 compile time。 C 20引入恒定函数，必须在编译时进行...

编程发布于2025-06-27
Android如何向PHP服务器发送POST数据？
在android apache httpclient（已弃用） httpclient httpclient = new defaulthttpclient（）; httppost httppost = new httppost（“ http://www.yoursite.com/script.p...

编程发布于2025-06-27
如何有效地转换PHP中的时区？
在PHP 利用dateTime对象和functions DateTime对象及其相应的功能别名为时区转换提供方便的方法。例如： //定义用户的时区 date_default_timezone_set（'欧洲/伦敦'）; //创建DateTime对象 $ dateTime = ne...

编程发布于2025-06-27
表单刷新后如何防止重复提交？
在Web开发中预防重复提交在表格提交后刷新页面时，遇到重复提交的问题是常见的。要解决这个问题，请考虑以下方法：想象一下具有这样的代码段，看起来像这样的代码段：））{ //数据库操作... 回声“操作完成”；死（）; } ？> ...

编程发布于2025-06-27
如何将PANDAS DataFrame列转换为DateTime格式并按日期过滤？
将pandas dataframe列转换为dateTime格式示例：使用column（mycol）包含以下格式的以下dataframe，以自定义格式：}）指定的格式参数匹配给定的字符串格式。转换后，MyCol列现在将包含DateTime对象。 date oped filtering > = p...

编程发布于2025-06-27
如何使用组在MySQL中旋转数据？
Pivoting Query Results Using MySQL GROUP BYIn a relational database, pivoting data refers to the rearrangement of rows and columns to enhance data vis...

编程发布于2025-06-27
为什么Microsoft Visual C ++无法正确实现两台模板的实例？
The Mystery of "Broken" Two-Phase Template Instantiation in Microsoft Visual C Problem Statement:Users commonly express concerns that Micro...

编程发布于2025-06-27