Flexbox 模块
Sublime Text 的 CSS Flexbox 模块
详细信息
安装次数
- 总和 17K
- Win 10K
- Mac 5K
- Linux 2K
8 月 6 日 | 8 月 5 日 | 8 月 4 日 | 8 月 3 日 | 8 月 2 日 | 8 月 1 日 | 7 月 31 日 | 7 月 30 日 | 7 月 29 日 | 7 月 28 日 | 7 月 27 日 | 7 月 26 日 | 7 月 25 日 | 7 月 24 日 | 7 月 23 日 | 7 月 22 日 | 7 月 21 日 | 7 月 20 日 | 7 月 19 日 | 7 月 18 日 | 7 月 17 日 | 7 月 16 日 | 7 月 15 日 | 7 月 14 日 | 7 月 13 日 | 7 月 12 日 | 7 月 11 日 | 7 月 10 日 | 7 月 9 日 | 7 月 8 日 | 7 月 7 日 | 7 月 6 日 | 7 月 5 日 | 7 月 4 日 | 7 月 3 日 | 7 月 2 日 | 7 月 1 日 | 6 月 30 日 | 6 月 29 日 | 6 月 28 日 | 6 月 27 日 | 6 月 26 日 | 6 月 25 日 | 6 月 24 日 | 6 月 23 日 | |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Windows | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 1 | 0 | 0 | 0 | 0 | 2 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 2 | 0 | 0 | 0 | 0 | 1 | 0 | 1 | 1 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 |
Mac | 1 | 1 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 1 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 |
Linux | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 1 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 |
说明文件
Sublime Text 的 CSS Flexbox 模块
安装
通过包控制安装,在搜索中查找 Flexbox Snippets。如果您在 Sublime Text 中仍然没有包控制,请获取它。如果您坚持不安装,您可以下载软件包并将其手动放入您的软件包目录中。它可以正常工作,但不会自动更新。
代码片段
适用于 CSS/LESS/Sass/SCSS/Stylus & Vue 组件。
display
触发器: flexbox⇥
display: ${1:flex|inline-flex};
flex-direction
触发器: flexdir⇥
flex-direction: ${1:row|row-reverse|column|column-reverse};
flex-wrap
触发器: flexwrap⇥
flex-wrap: ${1:nowrap|wrap|wrap-reverse};
flex-flow
触发器: flexflow⇥
flex-flow: ${1:<'flex-direction' (row|row-reverse|column|column-reverse)> || <'flex-wrap' (nowrap|wrap|wrap-reverse)>};
justify-content
触发器: flexjust⇥
justify-content: ${1:flex-start|flex-end|center|space-between|space-around};
align-items
触发器: flexitems⇥
align-items: ${1:flex-start|flex-end|center|baseline|stretch};
align-content
触发器: flexcont⇥
align-content: ${1:flex-start|flex-end|center|space-between|space-around|stretch};
order
触发器: flexorder⇥
order: ${1:0};
flex-grow
触发器: flexgrow⇥
flex-grow: ${1:0};
flex-shrink
触发器: flexshr⇥
flex-shrink: ${1:1};
flex-basis
触发器: flexbasis⇥
flex-basis: ${1:auto|<'width' (%|rem|em|px)>};
flex
触发器: flex⇥
flex: ${1:none|auto|[<'flex-grow' (0)> <'flex-shrink' (1)> || <'flex-basis' auto|<'width' (%|rem|em|px)>>]};
align-self
触发器: flexself⇥
align-self: ${1:auto|flex-start|flex-end|center|baseline|stretch};
前缀化 Flexbox
Flexbox 需要一些供应商前缀,以支持可能的最大浏览器。这不仅仅包括在属性前添加供应商前缀,实际上还有完全不同的属性和值名称。这是因为在 Flexbox 规范随时间推移发生变化,创建了 “旧版”、“过渡版”和“新版本”。
处理这个问题可能最好的方式是使用新(最终版)语法编写,并通过 Autoprefixer 运行您的 CSS,它处理回退项非常好。
贡献
如需提供帮助,请阅读贡献指南。
历史
详细变更日志请见发布记录。
参考资料
许可协议
MIT许可协议 © Breno Polanski