一个 CSS 代码实现四种布局 | CSS-Tricks

当一条关于 Flexbox 布局的推文在 Twitter 上获得 8K+ 个赞时，这确实非常引人注目！

4 种布局，只需 1 个 CSS 代码，感谢 Flex 👍

css`
form {
display: flex;
flex-wrap: wrap;

& > input {
flex: 1 1 10ch;
margin: .5rem;

&[type="email"] {
flex: 3 1 30ch;
}
}
}
`

在 Codepen 上查看源代码 👇https://#/Q8H5ly2ZIe pic.twitter.com/y6HqxClILZ
— Adam Argyle (@argyleink) 2020年1月14日

那里也使用了 “原生” CSS 嵌套，假设我们将来会得到它并且语法保持不变。

有些人反馈说代码难以理解。我不这么认为，对我来说，它表示

所有这些输入都允许缩小和放大
所有输入周围都有间距
电子邮件输入的大小应为其他输入的三倍
如果需要换行，则换行。

Flexbox 的一个很好的用例，当您不尝试对所有内容的大小进行超级精确控制时，它是正确的布局机制。

有一篇博文（没有署名 🤷‍♂️）提供了更详细的解释。

这让我想起了 Tim Van Damme 的自适应照片布局，其中照片使用 Flexbox 进行布局。它们并不会完全保持其纵横比，但由于 Flexbox 的灵活性，它们大多做到了。

这是一个原始代码的有趣分支.

就像用一行代码实现无数个布局一样，而且只需要几行代码。

Matt Healy

# 2020年1月29日

我理解为什么这看起来难以理解，但我认为这主要是因为我们不太习惯看到 Flexbox 属性。我认为实现此布局的其他方法（就您可以使用媒体查询、浮动和百分比宽度来实现的程度而言）并不比这更容易理解，而且更加冗长。

如果您不使用简写形式，这更容易阅读

form {
  display: flex;
  flex-wrap: wrap;

  & > input {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 10ch;
    margin: .5rem;

    &[type="email"] {
      flex-grow: 3;
      flex-shrink: 1;
      flex-basis: 30ch;
    }
  }
}

Rasmus Schultz

评论永久链接# 2020年1月29日

谢谢。我希望每个人都用长格式编写 CSS——更容易阅读，而且对于差异/合并工具来说，源代码控制也更友好。让工具来完成压缩到简写形式的工作 :-)

Kilian Valkhof

# 2020年1月30日

实际上，唯一“奇怪”的事情是第二种布局，这是因为类型为按钮/提交的输入与普通输入相比内容大小略小，这使得第二种布局成为可能。

我在您友情链接的博文中解释了这一点（以及 flex-grow、flex-shrink 和 flex-basis 值）（Polypane 博客上的所有内容都由我本人撰写。）

评论