前几天我和一个朋友聊天，抱怨 flexbox，因为我又一次忘记了 justify-content 和 align-items 属性之间的区别。
“我该怎么用 flexbox 将一个元素水平居中呢？”我问道。她说出了我认为最简洁的记忆方法。
她说 justify-content 用于在水平轴上定位元素，因为它比 align-items 的单词更长。起初我认为这是个非常愚蠢的想法，但现在我已经记住了。五分钟前我还在用它来制作这两个快速演示
查看示例 justify-content: center，作者 Robin Rendle (@robinrendle) 在 CodePen 上发布。
查看示例 align-items: center，作者 Robin Rendle (@robinrendle) 在 CodePen 上发布。
总结一下：
justify-content: 更长的单词: 水平对齐align-items: 更短的单词: 垂直对齐
这让我开始思考，是否还有其他记忆技巧或方法可以记住 CSS 中的复杂内容？您是否还有其他推荐的技巧？这有点像教孩子们用 "My Very Educated Mother Just Showed Us Nine" 来记忆行星名称，每个单词的首字母分别代表每个行星的首字母：水星、金星、地球、火星、木星、土星、天王星和海王星。
我通常通过思考对齐文本如何影响水平位置来记忆。
对齐通常用于文本。文本是水平的。我以此来记忆。
或者
justify-content类似于text-align: justify(X 轴)，保持 Y 轴 (align-items)。记住这一点的最佳方法是经常使用 flexbox 值 :-)
justify-content沿着主轴对齐，不一定水平对齐。如果您将flex-direction更改为row，它将执行垂直对齐。当您认为自己说出了什么聪明的话时，就会想到这一点 :-)
Ken (以及 Chris 和 Ajay 等) 说得没错。
无论如何，再次提到 Chris，在默认环境中，思考文本是一种简单的方法。
我本来也准备说这个，但您先说出来了，我很乐意强调这个观点。所以不要认为
justify-content会沿着 X 轴对齐项目，因为如果我们将flex-direction更改为column，它就会做相反的事情。嘿 Robin，感谢分享！对我来说，我认为 Flexbox 中的 "justify" 和文字处理程序中对齐文字的含义一样；然后，"align" 自行起作用用于排除。
再见！
CSS 有麻烦 (或 TRBL) 的事情，例如
padding: 1 2 3 4;。我猜想 90% 以上的 flexbox 使用情况都是默认的
flex-direction: row;，但我想值得注意的是，如果您更改它 (flex-direction: column;)，justify-content和align-items会翻转。所以与其说是 "水平轴"，不如说是 "主轴" (和垂直的次轴)。记忆方法可能仍然有效
网格布局很酷，即使它同样复杂，甚至更复杂，它始终是二维的，因此相同的属性始终执行 "相同的事情"。
这也是我担心的地方，这让我
align-items在十字轴上，而justify-content在主轴上。justify-content不沿着水平方向对齐。它沿着flex-direction(默认值：row) 对齐。因此，当设置
flex-direction: column时，justify-content将垂直对齐。我可能是个例外，但我依靠 flex 布局中没有
justify-items或justify-self这一事实。它只是justify-content作为沿着主轴对齐项目的单个属性。它不能在横轴上，因为我知道我对横轴有更多控制 (例如，我可以整体对齐 flex 行以及单独对齐 flex 项目)。因此，只要您记住 flex 布局中沿着主轴的对齐是有限的 (您无法单独对齐项目，并且
flex属性优先)，您就会记住justify-content属性仅对该轴起作用。[A]lign/[A]cross (主轴)
嗯... 我通常会 "cmd+T flexbox css-tricks" 并查找它
有人已经提到了 "trouble" (TRBL)。另一个我以前经常听到的记忆方法是 "LoVe/HAte" (LVHA)，用于记忆
a:link、a:visited、a:hover、a:active。这让我想起了这篇文章 https://css-tricks.org.cn/remember-selectors-with-love-and-hate/
我用 Michael Jackson = MJ = Main Axis -> justify-content 来记忆。
我一直用 TROUBLE (top, right, bottom, left) 来记忆
margin/padding需要用的 4 个值。同样在 WebGL 着色器中，将矩阵变换应用于模型的方式是反向的 TRASH (先缩放，再旋转，最后平移)。
当试图记住
margin或padding简写中的数字顺序 (如margin: 2rem 1rem 1rem 0) 时，我总是想到主方位指南针的记忆方法：Never Eat Shredded Wheat。这些项目按相同顺序出现 (N-E-S-W 或 top-right-bottom-left)。我有一个更简单的解决方案
1 – 首先将 "justify-content" 视为 "对齐文本"：它是水平制作的。
2 – 然后，考虑相反的轴 (垂直方向)。
因此，首先，假设您使用的是 flex-direction 的默认值，即 "row"，您希望将事物相对于该主轴对齐：向左、向右或居中。所有这些都是水平的。然后，其次，您可能希望垂直对齐它们。
当然，如果您是在column中工作，则必须反转它：主轴是垂直的！;)
当您只有两个选项并且混淆了它们时，最好的方法是记住更容易的那个。只需记住“justify-content”，它就像水平对齐字体一样。因此，align-items 将是相反的，假设默认的 flex-flow 在起作用。
如果您碰巧将 flex-flow 更改为列，请记住 flex-flow 已更改方向，因此 justify-content 也将更改方向。同样，只需记住一个。
当父元素是 flex 容器时，margin 在子元素上发挥着重要作用。
您可以通过对子元素应用 margin auto 来同时实现两者，而不管 flex-flow 如何。它将在垂直和水平方向上居中。子元素上的 margin 始终忽略 flex-flow。
尝试 margin-left: auto，元素将位于最右边，如果只在一个方向上应用，其他方向也是如此。
尝试 margin: auto auto 0，元素将底部居中。
我记忆行星的助记符很简单，就是“jsun”（想想男性名字“Jason”）。这只在你知道前四个类地行星（水星、金星、地球和火星）到小行星带为止时才有效，我认为你应该知道这些。然后每个字母代表气态行星
木星、土星、天王星和海王星。