Margin-block-auto kan være en smart måde at arbejde hurtigere og mere effektivt med flexbox-elementer. Du kan justere den vertikale margin på et element automatisk baseret på den tilgængelige plads inden for dets container.
Sådan fungerer det
Når det anvendes på et element, beregner margin-block-auto dynamisk og fordeler den tilgængelige plads inden for containeren ligeligt, hvilket skubber elementet væk fra de nærliggende elementer.
.container {
display: flex;
}
.container div:nth-child(2) {
margin-block-start: auto;
}
Bonus: en af de mest almindelige anvendelser af margin-block-auto er vertikal centrering af elementer inden for deres containere. Ved at sætte margin-block-auto på både top- og bundmarginerne af et element kan det blive vertikalt centreret inden for sin forældrecontainer, uanset højden.
Margin-block-auto beregner og fordeler dynamisk den tilgængelige plads inden for sin container ligeligt, hvilket skubber elementet væk fra de nærliggende elementer.
Dmitry Mayorov taler om margin-block-auto i dybden her