价格为四个布局

当有关Flexbox布局的推文在Twitter上获得8K喜欢时，非常值得注意！

4个布局以1的价格，谢谢Flex？

CSS
形式 {
显示：Flex;
弹性包：包裹；

＆>输入{
Flex：1 1 10CH;
利润：.5REM;

＆[type =“ email”] {
弹性：3 1 30ch;
}
}
}
`

查看源codepen？https：//t.co/q8h5ly2zie pic.twitter.com/y6hqxclilz

- 亚当·阿盖尔（@argyleink）2020年1月14日

假设我们在某个时刻和语法所保留的情况下，那也是在那里使用的“本机” CSS嵌套。

有一些反馈，即代码难以理解。我真的不这么认为，对我来说说：

• 所有这些输入都可以缩小和增长
• 甚至还有所有的间距
• 电子邮件输入应比其他电子邮件大三倍
• 如果需要包装，可以很好地包装。

Flexbox的一个很好的用例，当您不尝试对所有内容的大小都非常精确时，这是正确的布局机制。

有一篇博客文章（没有byline？‍♂️），带有更漫长的解释。

这使我想起了很多蒂姆·范·达姆（Tim Van Damme）的自适应照片布局，其中照片与Flexbox一起铺设了自己。他们并没有完全保持纵横比，但是由于弹性箱的灵活性，它们大部分都是这样。

这是原始的有趣叉。

这就像一个数十亿个布局，价格为一个，只需几行代码即可启动。

以上是价格为四个布局的详细内容。更多信息请关注PHP中文网其他相关文章！