ctrl+shift+p filters: :st2 :st3 :win :osx :linux
浏览

Flexbox 模块

brenopolanski 全部

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

说明文件

源代码
raw.​githubusercontent.​com

Sublime Text 的 CSS Flexbox 模块 构建状态

image snippets

安装

通过包控制安装,在搜索中查找 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