self-align-safe-unsafe-flex-002.html (4268B)
1 <!DOCTYPE html> 2 <title>Safe vs Unsafe align-self in Column Flex Layout</title> 3 <link rel="help" href="https://www.w3.org/TR/css-align-3/#overflow-values"> 4 <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#align-items-property"> 5 <link rel="match" href="self-align-safe-unsafe-flex-002-ref.html"> 6 <style> 7 /* Label things */ 8 body > div { 9 display: flow-root; 10 } 11 body > div::before { 12 display: block; 13 content: attr(class); 14 font-size: 10px; 15 margin-top: 10px; 16 } 17 18 /* Test Framework */ 19 .container { 20 border: solid aqua; 21 margin: 10px; 22 float: left; 23 width: 30px; 24 height: 30px; 25 display: flex; 26 flex-flow: column; 27 } 28 29 .item { 30 background: orange; 31 flex: none; 32 height: 100%; 33 } 34 35 /* Test */ 36 .small .item { 37 width: 20px; 38 } 39 .large .item { 40 width: 40px; 41 } 42 43 .center { align-self: center; } 44 .start { align-self: start; } 45 .end { align-self: end; } 46 .self-start { align-self: self-start; } 47 .self-end { align-self: self-end; } 48 .flex-start { align-self: flex-start; } 49 .flex-end { align-self: flex-end; } 50 51 .safe .center { align-self: safe center; } 52 .safe .start { align-self: safe start; } 53 .safe .end { align-self: safe end; } 54 .safe .self-start { align-self: safe self-start; } 55 .safe .self-end { align-self: safe self-end; } 56 .safe .flex-start { align-self: safe flex-start; } 57 .safe .flex-end { align-self: safe flex-end; } 58 59 .safe .center { align-self: safe center; } 60 .safe .start { align-self: safe start; } 61 .safe .end { align-self: safe end; } 62 .safe .self-start { align-self: safe self-start; } 63 .safe .self-end { align-self: safe self-end; } 64 .safe .flex-start { align-self: safe flex-start; } 65 .safe .flex-end { align-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>