Flexbox margin magic

by dmitri14

HTML

<p><code>justify-content: flex-start;</code></p>
<div class="container">
    <div class="box box1"><span>1</span></div>
    <div class="box box2"><span>2</span></div>
    <div class="box box3"><span>3</span></div>
    <div class="box box4"><span>4</span></div>
    <div class="box box5"><span>5</span></div>
</div>

<p><code>justify-content: flex-end;</code></p>
<div class="container">
    <div class="box box6"><span>6</span></div>
    <div class="box box7"><span>7</span></div>
    <div class="box box8"><span>8</span></div>
    <div class="box box9"><span>9</span></div>
    <div class="box box10"><span>10</span></div>
</div>

<p><code>justify-content: center;</code></p>
<div class="container">
    <div class="box box11"><span>11</span></div>
    <div class="box box12"><span>12</span></div>
    <div class="box box13"><span>13</span></div>
    <div class="box box14"><span>14</span></div>
    <div class="box box15"><span>15</span></div>
</div>

<p><code>justify-content: space-between;</code></p>
<div class="container">
    <div class="box box16"><span>16</span></div>
    <div class="box box17"><span>17</span></div>
    <div class="box box18"><span>18</span></div>
    <div class="box box19"><span>19</span></div>
    <div class="box box20"><span>20</span></div>
</div>

<p><code>justify-content: space-around;</code></p>
<div class="container">
    <div class="box box21"><span>21</span></div>
    <div class="box box22"><span>22</span></div>
    <div class="box box23"><span>23</span></div>
    <div class="box box24"><span>24</span></div>
    <div class="box box25"><span>25</span></div>
</div>

<p><code>.box26 { margin-right: auto; }</code></p>
<div class="container">
    <div class="box box26"><span>26</span></div>
    <div class="box box27"><span>27</span></div>
    <div class="box box28"><span>28</span></div>
    <div class="box box29"><span>29</span></div>
    <div class="box box30"><span>30</span></div>
</div>

<p><code>.box32 { margin-left: auto; }</code></p>
<div...

CSS

div.container:nth-of-type(1) { justify-content: flex-start;}
div.container:nth-of-type(2) { justify-content: flex-end;}
div.container:nth-of-type(3) { justify-content: center;}
div.container:nth-of-type(4) { justify-content: space-between;}
div.container:nth-of-type(5) { justify-content: space-around;}

.box1 {}
.box2 {}
.box3 {}
.box4 {}
.box5 {}
.box6 {}
.box7 {}
.box8 {}
.box9 {}
.box10 {}
.box11 {}
.box12 {}
.box13 {}
.box14 {}
.box15 {}
.box16 {}
.box17 {}
.box18 {}
.box19 {}
.box20 {}
.box21 {}
.box22 {}
.box23 {}
.box24 {}
.box25 {}
.box26 { margin-right: auto;}
.box27 {}
.box28 {}
.box29 {}
.box30 {}
.box31 {}
.box32 { margin-left: auto;}
.box33 {}
.box34 {}
.box35 {}
.box36 { margin-right: auto; }
.box37 {}
.box38 {}
.box39 {}
.box40 { margin-left: auto; }
.box41 { margin-left: auto; }
.box42 { margin-right: auto; }
.box43 {}
.box44 { margin-left: auto; }
.box45 { margin-right: auto; }
.box46 {}
.box47 {}
.box48 {}
.box49 { margin-left: auto; }
.box50 {}
.box51 {}
.box52 {}
.box53 {}
.box54 {}
.box55 { align-self: flex-end; margin-left: auto; }
.box56 { margin: auto; }
.box57 {}
.box58 {}
.box59 {}
.box60 {}
.box61 { margin-top: auto; visibility: hidden; }
.box62 { margin-top: auto; }
.box63 { margin-top: auto; margin-bottom: auto; }
.box64 {}
.box65 {}
.box66 { margin-left: auto; }
.box67 { margin-left: auto; }
.box68 { margin-left: auto; margin-right: auto; visibility: hidden; }
.box69 {}
.box70 {}
.box71 { width: 150px !important; }
.box72 { position: absolute; left: 50%; transform: translate(-50%,0); }
.box73 { width: 25px !important; margin-left: auto; }
.box74 {}
.box75 {}
.box76 { height: 100px !important; }
.box77 { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.box78 { margin-top: auto; height: 25px !important; }
.box79 {}
.box80 {}
.box81 {}
.box82 {}
.box83 {}
.box84 {}
.box85 {}
.box86 {}
.box87 {}
.box88 {}
.box89 {}
.box90 {}

#space-same { justify-content: space-between; }
#space-same::before { content: '';...