跳至主要内容
CSS-Tricks
  • 文章
  • 笔记
  • 链接
  • 指南
  • 年鉴
  • 随机
搜索

文章标签
flexbox

41 篇文章
{
,

}
指向文章“Flexbox 和 auto margin 的奇妙魔力”的直接链接
对齐 居中 flexbox 边距

Flexbox 和 auto margin 的奇妙魔力

在前端开发中,我经常会遇到知道自己不知道某些东西的情况。我可能知道要搜索哪个 CSS 属性,但完全不知道如何使用它或正确的…

Avatar of Robin Rendle
Robin Rendle 于 2018 年 7 月 31 日 发布
指向文章“从 Grid 到 Flex”的直接链接
flexbox grid

从 Grid 到 Flex

Una Kravets 展示了如何使用 CSS Grid 创建布局,并使用 flexbox 作为不支持 grid 属性的浏览器的回退方案。Una 写道

CSS Grid 太棒了!但是,如果您需要支持 IE11 及以下版本的用户的浏览器,

…
Avatar of Robin Rendle
Robin Rendle 于 2018 年 4 月 25 日 发布
指向文章“快速记住 `justify-content` 和 `align-items` 之间区别的方法”的直接链接
flexbox 学习

快速记住 `justify-content` 和 `align-items` 之间区别的方法

前几天我和一位朋友聊天,又一次抱怨 Flexbox,因为我暂时忘记了 justify-content 和 align-items 属性之间的区别。

“如何使用 Flex 水平居中元素?”…

Avatar of Robin Rendle
Robin Rendle 于 2018 年 4 月 5 日 发布
指向文章“可变顺序”的直接链接
flexbox

可变顺序

Roman Komarov 制作了一个引人入胜的小型技术演示,允许完全使用 CSS 进行可点击的表格排序。它结合了内联 CSS 自定义属性、order 属性和 calc()。

此演示引发了大量关于可访问性的讨论,…

Avatar of Chris Coyier
Chris Coyier 于 2018 年 2 月 22 日 发布
指向文章“MDN 上新的 Flexbox 指南”的直接链接
flexbox grid

MDN 上新的 Flexbox 指南

MDN 发布了由 Rachel Andrew 编写的关于 Flexbox 的全面 指南,其中包含新的和更新的材料。该指南包含 11 篇文章,演示了布局、用例以及您可能想要或需要了解的关于该主题的所有内容。所有…

Avatar of Geoff Graham
Geoff Graham 于 2018 年 1 月 12 日 发布
指向文章“CSS Grid 是否取代了 Flexbox?”的直接链接
flexbox grid

CSS Grid 是否取代了 Flexbox?

不。嗯。主要是不。

Grid 比 Flexbox 新得多,并且浏览器支持度略低。这就是为什么人们想知道 CSS Grid 是否会取代 Flexbox 是非常合理的。

为了说明…

Avatar of Robin Rendle
Robin Rendle 于 2022 年 2 月 23 日 发布
指向文章“可挤压可伸缩的 Flexbox 导航”的直接链接
flexbox 导航 画布外

可挤压可伸缩的 Flexbox 导航

前几天我在 The New Tropic 上看到了一个有趣的画布外导航方法。它并不是画布外部分。而是导航内元素占据空间的方式。它们会伸展以占据…

Avatar of Chris Coyier
Chris Coyier 于 2017 年 2 月 20 日 发布
指向文章“媒体对象,多种方法”的直接链接
flexbox 浮动 grid 布局 表格

媒体对象,多种方法

媒体对象模式是:左侧为图像元素,右侧为标题和文本。

Nicole Sullivan 称之为,并且 名称沿用至今。这是一个非常简单的模式,但就像所有网页设计一样,它可以…

Avatar of Chris Coyier
Chris Coyier 于 2017 年 1 月 28 日 发布
指向文章“粘性页脚,五种方法”的直接链接
flexbox 页脚 grid 粘性页脚

粘性页脚,五种方法

粘性页脚的目的是使其“粘贴”到浏览器窗口底部。但并非总是如此,如果页面上有足够的内容将页脚向下推,它仍然会这样做。但是如果…

Avatar of Chris Coyier
Chris Coyier 于 2020 年 1 月 29 日 发布
  • 更新
  • 1
  • ...
  • 3
  • 4
  • 5
  • 较旧

CSS-Tricks 由 DigitalOcean 提供支持。

关注 Web 开发最新动态

通过我们精心制作的时事通讯

DigitalOcean
  • 关于 DO
  • Cloudways
  • 法律信息
  • 获取免费额度!
CSS-Tricks
  • 为我们写文章!
  • 与我们合作广告
  • 联系我们
社交媒体
  • RSS Feed
  • CodePen
  • Mastodon
  • X
返回顶部

© 2024 . All rights reserved.