CSS评论：请勿使用//...
或<!-- ... -->
您遇到的问题与您的Flex代码无关。
问题是您使用 行注释语法 注释掉了文本，并且这不是有效的CSS。
button:ACTIVE { // feedback on touch modal background: aqua;}// next is for images.img { width: 8vmin; }因此，您实际上要做的是发布无效的代码，而不是注释掉该行，而是调用CSS错误处理，这会杀死下一条规则。换句话说，您之后的所有规则都会
// text texttext被忽略，就像您已执行以下操作一样：
xheight: 50px。
这就是为什么
order不适用于您的图标的原因：
// stuff living in #no#info-div1 { order: 3; -webkit-order: 3;}坚持使用标准CSS注释方法。用发表评论
。一旦在代码中进行了调整，该
order属性就可以正常工作（并且，如您所料，由于先前被忽略的代码，还会发生其他更改）。
最后，在单独的注释上：
您要在标准无前缀版本 之后 放置供应商前缀代码。
#container { flex-wrap: nowrap; -webkit-flex-wrap: nowrap; justify-content: center; -webkit-justify-content: center; align-items: center; -webkit-align-items: center; align-content: space-between; -webkit-align-content: space-between;}您应该考虑扭转这种情况。无前缀（W3C）版本应该排在最后，因此它始终是级联中的首选版本。
