ml-* — space to the left; ml-auto pushes elements right in flex. This family contains 71 generated classes in Nakshora 3.0.

Classes#

ClassGenerated CSS
ml-0margin-left: 0px;
-ml-0margin-left: -0px;
ml-1margin-left: 0.25rem;
-ml-1margin-left: -0.25rem;
ml-2margin-left: 0.5rem;
-ml-2margin-left: -0.5rem;
ml-3margin-left: 0.75rem;
-ml-3margin-left: -0.75rem;
ml-4margin-left: 1rem;
-ml-4margin-left: -1rem;
ml-5margin-left: 1.25rem;
-ml-5margin-left: -1.25rem;
ml-6margin-left: 1.5rem;
-ml-6margin-left: -1.5rem;
ml-7margin-left: 1.75rem;
-ml-7margin-left: -1.75rem;
ml-8margin-left: 2rem;
-ml-8margin-left: -2rem;
ml-9margin-left: 2.25rem;
-ml-9margin-left: -2.25rem;
ml-10margin-left: 2.5rem;
-ml-10margin-left: -2.5rem;
ml-11margin-left: 2.75rem;
-ml-11margin-left: -2.75rem;
ml-12margin-left: 3rem;
-ml-12margin-left: -3rem;
ml-14margin-left: 3.5rem;
-ml-14margin-left: -3.5rem;
ml-16margin-left: 4rem;
-ml-16margin-left: -4rem;
ml-20margin-left: 5rem;
-ml-20margin-left: -5rem;
ml-24margin-left: 6rem;
-ml-24margin-left: -6rem;
ml-28margin-left: 7rem;
-ml-28margin-left: -7rem;
ml-32margin-left: 8rem;
-ml-32margin-left: -8rem;
ml-36margin-left: 9rem;
-ml-36margin-left: -9rem;
ml-40margin-left: 10rem;
-ml-40margin-left: -10rem;
ml-44margin-left: 11rem;
-ml-44margin-left: -11rem;
ml-48margin-left: 12rem;
-ml-48margin-left: -12rem;
ml-52margin-left: 13rem;
-ml-52margin-left: -13rem;
ml-56margin-left: 14rem;
-ml-56margin-left: -14rem;
ml-60margin-left: 15rem;
-ml-60margin-left: -15rem;
ml-64margin-left: 16rem;
-ml-64margin-left: -16rem;
ml-72margin-left: 18rem;
-ml-72margin-left: -18rem;
ml-80margin-left: 20rem;
-ml-80margin-left: -20rem;
ml-96margin-left: 24rem;
-ml-96margin-left: -24rem;

…and 11 more in this family — search by class name to find the exact one.

Example#

example
html
<nav class="flex">
  <a class="mr-4">Home</a>
  <button class="ml-auto">Login</button>
</nav>

Responsive & variants#

Every class here accepts screen prefixes (sm:xl:) and state variants — md:hover:p-4 style stacks compile to a single media query. See responsive/index|Responsive design and variants/index|Variants.

Best practices#

  • ml-auto in a flex row is the classic right-align trick

utilities/spacing/spacing-scale|Spacing scale · utilities/sizing/width|Width · comparisons/margin-vs-padding|Margin vs padding