self-align-safe-unsafe-flex-003.html (4288B)
1 <!DOCTYPE html> 2 <html dir=rtl> 3 <title>Safe vs Unsafe align-self in RTL Column Flex 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-flexbox-1/#align-items-property"> 6 <link rel="match" href="self-align-safe-unsafe-flex-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: flex; 27 flex-flow: column; 28 } 29 30 .item { 31 background: orange; 32 flex: none; 33 height: 100%; 34 } 35 36 /* Test */ 37 .small .item { 38 width: 20px; 39 } 40 .large .item { 41 width: 40px; 42 } 43 44 .center { align-self: center; } 45 .start { align-self: start; } 46 .end { align-self: end; } 47 .self-start { align-self: self-start; } 48 .self-end { align-self: self-end; } 49 .flex-start { align-self: flex-start; } 50 .flex-end { align-self: flex-end; } 51 52 .safe .center { align-self: safe center; } 53 .safe .start { align-self: safe start; } 54 .safe .end { align-self: safe end; } 55 .safe .self-start { align-self: safe self-start; } 56 .safe .self-end { align-self: safe self-end; } 57 .safe .flex-start { align-self: safe flex-start; } 58 .safe .flex-end { align-self: safe flex-end; } 59 60 .safe .center { align-self: safe center; } 61 .safe .start { align-self: safe start; } 62 .safe .end { align-self: safe end; } 63 .safe .self-start { align-self: safe self-start; } 64 .safe .self-end { align-self: safe self-end; } 65 .safe .flex-start { align-self: safe flex-start; } 66 .safe .flex-end { align-self: safe flex-end; } 67 </style> 68 69 <div class="default small"> 70 <div class="container"> 71 <div class="item normal"></div> 72 </div> 73 <div class="container"> 74 <div class="item center"></div> 75 </div> 76 <div class="container"> 77 <div class="item start"></div> 78 </div> 79 <div class="container"> 80 <div class="item end"></div> 81 </div> 82 <div class="container"> 83 <div class="item self-start"></div> 84 </div> 85 <div class="container"> 86 <div class="item self-end"></div> 87 </div> 88 <div class="container"> 89 <div class="item flex-start"></div> 90 </div> 91 <div class="container"> 92 <div class="item flex-end"></div> 93 </div> 94 </div> 95 96 <div class="default large"> 97 <div class="container"> 98 <div class="item normal"></div> 99 </div> 100 <div class="container"> 101 <div class="item center"></div> 102 </div> 103 <div class="container"> 104 <div class="item start"></div> 105 </div> 106 <div class="container"> 107 <div class="item end"></div> 108 </div> 109 <div class="container"> 110 <div class="item self-start"></div> 111 </div> 112 <div class="container"> 113 <div class="item self-end"></div> 114 </div> 115 <div class="container"> 116 <div class="item flex-start"></div> 117 </div> 118 <div class="container"> 119 <div class="item flex-end"></div> 120 </div> 121 </div> 122 123 <div class="unsafe large"> 124 <div class="container"> 125 <div class="item normal"></div> 126 </div> 127 <div class="container"> 128 <div class="item center"></div> 129 </div> 130 <div class="container"> 131 <div class="item start"></div> 132 </div> 133 <div class="container"> 134 <div class="item end"></div> 135 </div> 136 <div class="container"> 137 <div class="item self-start"></div> 138 </div> 139 <div class="container"> 140 <div class="item self-end"></div> 141 </div> 142 <div class="container"> 143 <div class="item flex-start"></div> 144 </div> 145 <div class="container"> 146 <div class="item flex-end"></div> 147 </div> 148 </div> 149 150 <div class="safe large"> 151 <div class="container"> 152 <div class="item normal"></div> 153 </div> 154 <div class="container"> 155 <div class="item center"></div> 156 </div> 157 <div class="container"> 158 <div class="item start"></div> 159 </div> 160 <div class="container"> 161 <div class="item end"></div> 162 </div> 163 <div class="container"> 164 <div class="item self-start"></div> 165 </div> 166 <div class="container"> 167 <div class="item self-end"></div> 168 </div> 169 <div class="container"> 170 <div class="item flex-start"></div> 171 </div> 172 <div class="container"> 173 <div class="item flex-end"></div> 174 </div> 175 </div>