文章标签

响应式布局，更少的媒体查询

我们无法谈论 Web 开发而不谈论响应式设计。这是当今的既定事实，并且已经持续了很多年。媒体查询是响应式设计的一部分，它们不会消失。自从引入了…

Temani Afif 于 2023 年 7 月 6 日

flexbox gap grid multi-column layout

注意“间隙”

您可能已经了解 CSS gap 属性。它并不完全是新东西，但它在去年获得了重要的新功能：它现在除了 CSS Grid 外，还在 Flexbox 中生效。加上我...

Patrick Brosset 于 2021 年 9 月 16 日

flex-basis flex-grow flex-shrink flexbox grid

使用 Flexbox 实现等宽列：比你想象的更复杂

Flexbox 虽然很棒，但它在幕后所做的实际上有点奇怪，因为默认情况下，它同时做两件事。它首先查看内容大小，即我们在元素上声明 width: max-content 时会得到的内容大小。但在其基础上，flex-shrink 也在做一些工作，允许项目变小，但只有在需要时。让我们分别看一下这两个属性，并了解它们是如何协同工作的。

Kevin Powell 于 2022 年 9 月 22 日

flexbox float shape-outside

将元素浮动到底角

需要将一个元素放置在右侧或左侧，使文本环绕它吗？这对 float 属性来说是一个简单的任务。但是，如果您还需要将该元素（我们称之为...

Temani Afif 于 2024 年 5 月 21 日

charts clip-path data visualization flexbox

如何使用 CSS 制作面积图

您可能知道几种使用纯 CSS 创建图表的方法。其中一些在 CSS-Tricks 上有介绍，还有很多可以在 CodePen 上找到，但我没有见过很多“面积图”的例子（想象...

Rami Yushuvaev 于 2020 年 12 月 7 日

flex-basis flex-grow flex-shrink flexbox

理解 flex-grow、flex-shrink 和 flex-basis

当您将 CSS 属性应用于元素时，幕后会发生很多事情。例如，假设我们有以下 HTML 代码

<div class="parent"<div class="child"Child</div<div class="child"Child</div<div class="child"Child</div</div

...

Robin Rendle 于 2022 年 10 月 18 日

flexbox grid layout

#196：与 Kyle Simpson 学习 Grid & Flexbox

Kyle 是一个 JavaScript 人。他对 Web 知之甚多，对 CSS 也了解不少，但对现代 CSS 布局工具（如 flexbox 和 grid）并不那么熟悉。我们并没有从 0 到 100 的学习，而是...

Chris Coyier 于 2020 年 10 月 30 日

flexbox

使用 Flexbox 在支点上平衡

让我向您展示一种我最近发现的方法，可以将一堆元素围绕我称之为“支点”的东西居中。我保证，奇特的 HTML 代码不在考虑范围之内，您也不需要了解任何...

Julian Merkenich 于 2020 年 10 月 9 日

flexbox grid subgrid

实现垂直对齐（感谢 Subgrid！）

我们最近的垂直对齐工具有了很大改进。我早期的网站设计工作涉及布局 960px 宽的首页设计，并使用 12 列网格水平对齐页面上的元素。媒体查询...

Cathy Dutton 于 2020 年 10 月 14 日