Back to contents
Flex item alignment using margins
margin:0 (the default)
<section style="display:flex;"> <box style="margin:0;">Number One</box> <box style="margin:0;">Number Two</box> <box style="margin:0;">Number Three</box> </section>
Number One
Number Two
Number Three
margin:1em
<section style="display:flex;"> <box style="margin:1em;">Number One</box> <box style="margin:1em;">Number Two</box> <box style="margin:1em;">Number Three</box> </section>
Number One
Number Two
Number Three
margin:auto
<section style="display:flex;"> <box style="margin:auto;">Number One</box> <box style="margin:auto;">Number Two</box> <box style="margin:auto;">Number Three</box> </section>
Number One
Number Two
Number Three
combined
<section style="display:flex;"> <box style="margin:1em;">Number One</box> <box style="margin:auto;">Number Two</box> <box style="margin:1em;">Number Three</box> </section>
Number One
Number Two
Number Three