self-align-safe-unsafe-grid-003.html (4295B)
1 <!DOCTYPE html> 2 <html dir=rtl> 3 <title>Safe vs Unsafe justify-self in RTL Grid Layout</title> 4 <link rel="help" href="https://www.w3.org/TR/css-align-3/#overflow-values"> 5 <link rel="help" href="https://www.w3.org/TR/css-grid-1/#row-align"> 6 <link rel="match" href="self-align-safe-unsafe-grid-003-ref.html"> 7 <style> 8 /* Label things */ 9 body > div { 10 display: flow-root; 11 } 12 body > div::before { 13 display: block; 14 content: attr(class); 15 font-size: 10px; 16 margin-top: 10px; 17 } 18 19 /* Test Framework */ 20 .container { 21 border: solid aqua; 22 margin: 10px; 23 float: right; 24 width: 30px; 25 height: 30px; 26 display: grid; 27 grid: 100% / 100%; 28 } 29 30 .item { 31 background: orange; 32 height: 100%; 33 } 34 35 /* Test */ 36 .small .item { 37 width: 20px; 38 } 39 .large .item { 40 width: 40px; 41 } 42 43 .center { justify-self: center; } 44 .start { justify-self: start; } 45 .end { justify-self: end; } 46 .self-start { justify-self: self-start; } 47 .self-end { justify-self: self-end; } 48 .flex-start { justify-self: flex-start; } 49 .flex-end { justify-self: flex-end; } 50 51 .safe .center { justify-self: safe center; } 52 .safe .start { justify-self: safe start; } 53 .safe .end { justify-self: safe end; } 54 .safe .self-start { justify-self: safe self-start; } 55 .safe .self-end { justify-self: safe self-end; } 56 .safe .flex-start { justify-self: safe flex-start; } 57 .safe .flex-end { justify-self: safe flex-end; } 58 59 .safe .center { justify-self: safe center; } 60 .safe .start { justify-self: safe start; } 61 .safe .end { justify-self: safe end; } 62 .safe .self-start { justify-self: safe self-start; } 63 .safe .self-end { justify-self: safe self-end; } 64 .safe .flex-start { justify-self: safe flex-start; } 65 .safe .flex-end { justify-self: safe flex-end; } 66 </style> 67 68 <div class="default small"> 69 <div class="container"> 70 <div class="item normal"></div> 71 </div> 72 <div class="container"> 73 <div class="item center"></div> 74 </div> 75 <div class="container"> 76 <div class="item start"></div> 77 </div> 78 <div class="container"> 79 <div class="item end"></div> 80 </div> 81 <div class="container"> 82 <div class="item self-start"></div> 83 </div> 84 <div class="container"> 85 <div class="item self-end"></div> 86 </div> 87 <div class="container"> 88 <div class="item flex-start"></div> 89 </div> 90 <div class="container"> 91 <div class="item flex-end"></div> 92 </div> 93 </div> 94 95 <div class="default large"> 96 <div class="container"> 97 <div class="item normal"></div> 98 </div> 99 <div class="container"> 100 <div class="item center"></div> 101 </div> 102 <div class="container"> 103 <div class="item start"></div> 104 </div> 105 <div class="container"> 106 <div class="item end"></div> 107 </div> 108 <div class="container"> 109 <div class="item self-start"></div> 110 </div> 111 <div class="container"> 112 <div class="item self-end"></div> 113 </div> 114 <div class="container"> 115 <div class="item flex-start"></div> 116 </div> 117 <div class="container"> 118 <div class="item flex-end"></div> 119 </div> 120 </div> 121 122 <div class="unsafe large"> 123 <div class="container"> 124 <div class="item normal"></div> 125 </div> 126 <div class="container"> 127 <div class="item center"></div> 128 </div> 129 <div class="container"> 130 <div class="item start"></div> 131 </div> 132 <div class="container"> 133 <div class="item end"></div> 134 </div> 135 <div class="container"> 136 <div class="item self-start"></div> 137 </div> 138 <div class="container"> 139 <div class="item self-end"></div> 140 </div> 141 <div class="container"> 142 <div class="item flex-start"></div> 143 </div> 144 <div class="container"> 145 <div class="item flex-end"></div> 146 </div> 147 </div> 148 149 <div class="safe large"> 150 <div class="container"> 151 <div class="item normal"></div> 152 </div> 153 <div class="container"> 154 <div class="item center"></div> 155 </div> 156 <div class="container"> 157 <div class="item start"></div> 158 </div> 159 <div class="container"> 160 <div class="item end"></div> 161 </div> 162 <div class="container"> 163 <div class="item self-start"></div> 164 </div> 165 <div class="container"> 166 <div class="item self-end"></div> 167 </div> 168 <div class="container"> 169 <div class="item flex-start"></div> 170 </div> 171 <div class="container"> 172 <div class="item flex-end"></div> 173 </div> 174 </div>