先问两个问题：你是用主轴-交叉轴/辅助轴/副轴的概念来理解flex的吗？你是不是也用这个概念来理解网格？如果你是这样理解flex的，那就慢慢听我说。今天就来打破你对flex的理解。display:grid和display:flex的默认方向是row。为什么它们以不同的形式出现？display:flex:Effectdisplay:grid:Effect这也是很多人熟练使用flex后转成grid遇到的最大问题（其实我说的是我自己，一个手动狗头）。对于flex布局，最常用的属性是justify-content和align-items。justify-content控制的是主轴方向的布局，align-items控制的是横轴（也叫侧轴，或者叫副轴？副轴？）方向的布局。justify-content控制的方向称为主轴方向，大家比较统一。align-items控制的方向是什么？人们对它有不同的理解。在MDN中，它被称为交叉轴或侧轴。RuanYifeng和ZhangXinxu博文中使用的是交叉轴，至于辅助轴或者副轴的翻译，我这样的前端开发者写的博文比较多。横轴的平移统一用于下面的对齐项。不知道其他人有没有和我一样的理解。当时我是flex的新手。了解了主轴之后，剩下的自然就是副轴，或者说辅助轴。毕竟crossaxis或者sideaxis之类的翻译确实比较难理解，但是main-sub/auxiliary可以从字面上理解，然后学习了flex布局方案，一直用的很开心直到现在。如果只用flex布局，这个理解是没有问题的。直到有一天，当你使用grid布局时，你会发现为什么有justify-content和align-items，效果却完全不同？然后吐槽一下：网格布局真的好难用，但是一样的属性却有不同的用处。现在网格布局已经流行很久了。一方面是兼容性问题，但是时间到了2022年，大部分主流浏览器都已经支持了。所以就像两年前张新旭说的那样：“虽然强是强，但学起来很累，未来它的火爆程度我并不看好。《为什么grid布局学起来很累，用flex的概念来理解grid，学起来一定很累，flex是什么概念，上面说了：主轴-横轴grid是grid布局，所以没有这个概念，尤其是开发者还是用辅助轴和辅助轴去理解，使用grid是一场噩梦，建立正确的理解方法适用于flex和grid，要理解grid，首先要放弃你的理解flex的，就是不要再用主轴-交叉轴的概念（好像有点逆天了），听我慢慢说，对于flex来说，控制方向的属性是flex-direction，而默认是row，通过console可以看到，flex将页面分为纵向3列，横向1行，对于grid布局，控制方向的属性是grid-auto-flow，默认是row。如图通过控制台，网格将页面水平划分分为3行，垂直分为1列。要弄清楚这个问题，首先要回到项目和内容。项目和内容是什么意思？你有没有想过为什么item要加s，而content不加s？直译就是item和content，也就是说item代表行和列，多个行和列组成一个网格，content就是每个网格中的内容。所以项目代表多个网格。也就是说：align-items和justify-items控制网格排列。align-content和justify-content控制网格中的内容排列。正确理解flex和grid的方式为什么flex布局使用align-items和justify-content而不是justify-items。重点来了：把以flex布局的div（容器）看成一个grid，即flex内部的直接子元素都是以grid布局的div（容器）为content，把它看成多个grid，具体是几个grid，取决于grid-template-columns和grid-template-rows的值。也就是说，grid里面的直接子元素都是items，所以你现在可以理解flex布局了，为什么要用justify-content而不是justify-items呢？因为flex布局可以通过align-items来控制grid的排列，所以使用justify-content来控制grid中的内容。其实从物品和内容的价值上就可以看出区别了。items值：start/center/end等content值：space-between/space-around等flex-direction和grid-auto-flow理解从这两个值：row和column来看，很容易将它们理解为布局方向。其实还需要在布局方向上加一个主题，即xx的布局方向。flex-direction控制内容排列row:内容水平排列column:内容垂直排列grid-auto-flow控制项目排列row:itemfirstcolumnthencolumn:itemfirstcolumnthenrow纠错关于flex和grid的使用场景：flex：做二维布局grid：做三维布局不知道是谁提出来的这个idea，这个idea简直太牛逼了！！首先什么是3D？三维就是三维吧？网格布局是否涉及三维？不？那能叫立体布局吗？当一个概念不能用中文准确表达时，首先不能用错误的词来表达！最后受了主轴和副轴的影响，好久没学网格布局了。这种理解方式确实有助于初学者理解flex布局的工作原理，对于flex的普及是不可或缺的。但我们也得看到这种思维背后的问题，导致理解网格的成本过高。以上纯属本人孤陋寡闻，没有任何资料可以证明（因为我英文不好，我太难在一堆英文资料中找到支持我观点的证据），如果有什么不对，欢迎指出。
