block-justify-self-ref.html (3646B)
1 <!doctype html> 2 <meta charset="UTF-8"> 3 <title>Self-Alignment: justify-self - block-level elements reference</title> 4 <link rel="author" title="David Tran" href="mailto:davidtranhq+wpt@gmail.com" /> 5 <style> 6 .grid-container div { 7 width: 100px; 8 background-color: green; 9 } 10 11 .stack { 12 display: grid; 13 } 14 15 .stack > * { 16 grid-row: 1; 17 grid-column: 1; 18 } 19 20 body { 21 width: 700px; 22 } 23 24 </style> 25 <p>Test passes if <strong>no red</strong> is visible</p> 26 27 <div class="stack" style="float: left;"> 28 <article class="grid-container" style="display: grid; grid-template-columns: 1fr; width: 300px"> 29 <div style="justify-self: auto;">auto</div> 30 <div style="justify-self: normal;">normal</div> 31 <div style="justify-self: stretch; width: auto; margin: 0;">stretch</div> 32 <div style="justify-self: stretch; margin: 0;">stretch</div> 33 <div style="justify-self: stretch; width: auto; margin: auto;">stretch</div> 34 <div style="justify-self: left;">left</div> 35 <div style="justify-self: right;">right</div> 36 <div style="justify-self: start;">start</div> 37 <div style="justify-self: center;">center</div> 38 <div style="justify-self: end;">end</div> 39 <div style="justify-self: self-start;">self-start</div> 40 <div style="justify-self: self-end;">self-end</div> 41 <div style="justify-self: flex-start;">flex-start</div> 42 <div style="justify-self: flex-end;">flex-end</div> 43 <div style="float: left; justify-self: center;">float left</div> 44 <div style="float: right; justify-self: center;">float right</div> 45 <div style="justify-self: self-start; direction: rtl">self-start (rtl)</div> 46 <div style="justify-self: self-end; direction: rtl">self-end (rtl)</div> 47 <div style="justify-self: start; direction: rtl">start (rtl)</div> 48 <div style="justify-self: end; direction: rtl">end (rtl)</div> 49 <div style="justify-self: end">end parent 50 <div style="position: absolute;">absolute child</div> 51 </div> 52 <div style="justify-self: end; position: absolute;">absolute parent</div> 53 </article> 54 </div> 55 <div class="stack" style="float: right; direction: rtl"> 56 <article class="grid-container" style="display: grid; grid-template-columns: 1fr; width: 300px"> 57 <div style="justify-self: auto;">auto</div> 58 <div style="justify-self: normal;">normal</div> 59 <div style="justify-self: stretch; width: auto; margin: 0;">stretch</div> 60 <div style="justify-self: stretch; margin: 0;">stretch</div> 61 <div style="justify-self: stretch; width: auto; margin: auto;">stretch</div> 62 <div style="justify-self: left;">left</div> 63 <div style="justify-self: right;">right</div> 64 <div style="justify-self: start;">start</div> 65 <div style="justify-self: center;">center</div> 66 <div style="justify-self: end;">end</div> 67 <div style="justify-self: self-start;">self-start</div> 68 <div style="justify-self: self-end;">self-end</div> 69 <div style="justify-self: flex-start;">flex-start</div> 70 <div style="justify-self: flex-end;">flex-end</div> 71 <div style="float: left; justify-self: center;">float left</div> 72 <div style="float: right; justify-self: center;">float right</div> 73 <div style="justify-self: self-start; direction: ltr">self-start (ltr)</div> 74 <div style="justify-self: self-end; direction: ltr">self-end (ltr)</div> 75 <div style="justify-self: start; direction: ltr">start (ltr)</div> 76 <div style="justify-self: end; direction: ltr">end (ltr)</div> 77 <div style="justify-self: end">end parent 78 <div style="position: absolute;">absolute child</div> 79 </div> 80 <div style="justify-self: end; position: absolute;">absolute parent</div> 81 </article> 82 </div>