右项靠左外边距贴到右边

左边一块红色，右边一块蓝色。父级是横向的弹性盒。蓝色带上左外边距为 auto 时，它被推到这一行的右端。去掉这条外边距，两块都贴在左边，中间没有空档。第一份示例靠外部的工具类，没有那份样式表时看不出差别。第二份把同样的规则写进页面自己的样式。

第一份依赖外部样式

第一份用 flex 作为父级，红色子项一类，蓝色子项带 ml-auto。内边距、边框也是工具类。页面从外部地址拉那套工具类。没有它，这些类名没有对应规则，两行看起来会一样。用户指出没有那套工具类就没有效果。后一份不再引用外部地址。

后一份的父级类是 flex-container，规则是 display: flex，边框 1px solid #ccc，和下一块示例隔 32px。子项内边距 16px，字是白色。左侧背景 #ef4444，右侧 #3b82f6。推开用的类叫 ml-auto，规则只有一句：margin-left: auto。标题改成了在说这句属性，不再说工具类的名字。文案是左侧项目和右侧项目。

带这个类时，右项到容器右端。不带时，两项挨着靠左。左项的宽度变了，右项仍会到右端，因为吃掉剩余空间的是这条外边距，不是写死的左边距像素。

父级必须是这段里的弹性盒

auto 能把剩余空间吃进左外边距，是因为父级在样本里是 display: flex。只把 margin-left: auto 抄到一个普通块级父级上，又没有给子项宽度，看不到同样的一左一右。对照时两行父级都要保留 display: flex。唯一的差别是右项有没有 ml-auto。边框和内边距两行都有，避免把边框的有无当成推开的原因。

颜色只负责分辨左右。换成别的颜色，推开仍然发生。白色字写在这两种背景上，是为了看得见字。布局结论不依赖这两个色值。

同一份记录后面还要了左边导航、中间信息流、右边链接。那是另一页的三栏，不由这一条左外边距单独完成。三栏要各写宽度或弹性增长。不要把首页三栏的需求，理解成再给中间那一栏加一个 ml-auto 就结束。

对照时只留一个差别

两行都用弹性盒、同样的边框和内边距。一行的右项有 margin-left: auto，另一行没有。有的那一行，空档在左右项之间，右项贴右。没有的那一行，两项紧挨在左边。样式写在页面里，不依赖外部工具类。外部地址失效时，第一份会让人以为属性没有用。

没有外部工具类时，第一份里的类名只是普通字符串，父级不会变成弹性盒，左外边距也不会是 auto。两行看起来相同，不是属性失效，是规则没有加载。第二份把规则写在页面的样式块里。父级显示为弹性盒，边框为灰色实线，下边距把两个例子隔开。子项有内边距和白字。左右背景一个偏红一个偏蓝，用来分辨哪一块被推到了右端。

推开的条件是父级为弹性盒，并且右项带左外边距 auto。对照的第二行去掉这个类，其它规则相同。空档出现在两项之间，右项贴着容器右边。左项变宽时，右项仍然贴右，因为剩余空间进了外边距，没有写成固定像素。若两行的父级一个是弹性盒、一个不是，就不能把差别归因于这一条外边距。

颜色值可以更换，布局不变。三栏首页是后面的另一个要求。导航、信息流和侧栏需要各自的宽度或增长规则。一条左外边距只能把一项推到当前行的另一端，变不出三栏。做对照页时不要把三栏的样式和这两行示例写在同一个结论里。

两行示例只证明一件事。父级是弹性盒时，右项带上左外边距为自动，右项会被推到容器的右端。 去掉这一条外边距，左右两项都贴在容器的左边，中间没有空档。这就是对照要看见的差别。 第一份把规则写成外部工具类的名字，并从外部地址加载样式。样式没有加载时，类名只是字符串。 两行看起来一样，不是自动外边距没有作用，而是对应的规则根本没有到页面上。 第二份不再引用外部地址。弹性盒、边框、内边距、白字和左右两种背景都写进页面自己的样式。 推开只用一条左外边距。对照时两行的父级、边框和内边距保持相同，只让右项差这一条。 只有这样，空档出现在中间、右项贴着右边，才能算在这条外边距上，而不是算在别的规则上。 左项变宽时，右项仍然贴着右边。吃掉剩余空间的是自动外边距，不是一个写死的像素距离。 边框用来看见容器的右边界。没有边框时，贴右不容易被看出来，会被误认为规则没有生效。 内边距让文字离开色块的边缘，它本身不负责把右项推开。两行的内边距要保持一样。 把内边距加大，色块变宽，右项仍应贴右。若离开了右边，就是自动外边距没有写到右项上。 左右两种背景和白字只是为了分辨哪一块在右边。换成别的看得清的配色，推开的结论不变。 用浏览器直接打开第二份页面就能看，不必再安装样式框架。这是相对第一份的改动。 若两行仍然一样，先检查自动外边距是否真的加在右项上，而不是加在左项或父级上。 写在左项上会把空档留到容器的另一侧，不是这个示例要的一左一右。 同一份记录后面还要了左导航、中间信息流和右链接。那三栏要各自的宽度，不是再加一条外边距就能变出来。 打开页面后先看第一行是否贴着边框右侧，再看第二行是否紧挨着左边的那一块。 两行都要有边框。拿掉一行的边框，对照就不公平，右边界没有参照。 父级显示方式两行都要是弹性盒。只有一行是的话，差别里混进了显示方式，不能只归因于外边距。 自动外边距写在右项而不是左项。写反了，空档会留在容器的另一边。 内边距两行相同。把内边距调大只应让色块变宽，不应让右项离开右边。 白字配两种背景是为了可读。截图换颜色没有关系，贴右这件事还在就可以。 没有外部样式地址也能打开，这是第二份相对第一份必须保住的差别。 三栏页面另做。不要在这两行下面直接加导航宽度，以免把只差一条外边距的对照弄乱。 左项的文字变长时再看一次。右项仍应贴右。若被顶离右边，规则就不是自动外边距。 保存成单个页面文件再打开。不需要安装工具，也不需要网络去拉样式。