还在烦恼CSS flex怎么调整吗？也许你该试试Chrome 90 的新功能 — flexbox Editor

新手在学习CSS flex时，首要观念就是要釐清什么是main axis与cross axis之外，接着就是各种排列属性，譬如：flex-direction、flex-wrap、justify-content、align-items....等

除非对CSS flex很熟，不然版型很难一次到位，多少都会调整一下，我们一般都会在developer tools(F12)的Styles中修改CSS内容，让浏览器可以即时预览修改后的结果，

但如果是複杂的版型或是新手不熟flex，改哪个属性还要查来查去的，确实会很不方便。

好加在，Google Chrome推出的90版，提供了「flexbox Editor」，让开发者可以透过此介面，快速的调整版型。

首先，在有使用flex的元素旁边，会看到显示flex的灰色按钮，点击后，可以看到flex layout

接着，在Styles，display: flex旁，有个icon，点击后，会显示flexbox Editor，
此时，有数个flex属性可以选择，如第一个是flex-direction：

flex-wrap

justify-content

align-items

在Layout中，会列出所有使用flex的元素

color picker的功能，直接点选颜色即可，无须再输入色码

有了以上这些功能，我们就可以快速地调整不同属性的内容，是不是很实用呢!!!