1 module source.uim.bootstrap.bs5.demos.utilities.flex; 2 3 import uim.bootstrap; 4 5 static this() { 6 demoBS5.pages("basic/utilities/flex", new class DH5AppPage { 7 this() { 8 super(); 9 this 10 .created(DateTime(2020, 12, 20, 10, 10, 0)) 11 .changed(timeLastModified(__FILE_FULL_PATH__)) 12 .parameters([ 13 "pageTitle": "Flex - Bootstrap 5 Demo", 14 ]); 15 } 16 17 override string content() { 18 return 19 H5Main(["style":"margin-top:70px;"], 20 H5Div(["container-fluid", "mt-3", "bg-light"], 21 bs5Breadcrumbs(["/", "/demos", "/demos/uim-bootstrap", "/demos/uim-bootstrap/5/", "/demos/uim-bootstrap/5/basic/", "/demos/uim-bootstrap/5/basic/utilities"], 22 ["UI Manufaktur", "Demos", "uim-bootstrap", "Bootstrap 5", "Basic", "Utilities"], "Flex")), 23 BS5Container(["mt-3"]).row( 24 H5Div(["col-12", "col-lg-2"], 25 listLevels("basic"), 26 listAreas("basic", "utilities"), 27 listSections("basic", "utilities", "flex")), 28 H5Div(["col-12", "col-lg-8"], 29 dateInfo(this), 30 H5H2(["display-4"], "Flex"), 31 H5Hr, 32 ), 33 H5Div(["col-12", "col-lg-2"]))).toString; 34 } 35 }); 36 } 37 /* 38 <main> 39 H5Div(["container-fluid mt-3 bg-light m-1"] 40 <nav "aria-label":"Breadcrumb" > 41 H5Ol(["breadcrumb"] 42 H5Li(["breadcrumb-item"]<a href="/"]UI Manufaktur),") 43 H5Li(["breadcrumb-item"]<a href="/demos"]Demos),") 44 H5Li(["breadcrumb-item"]<a href="/demos/uim-bootstrap"]uim-bootstrap),") 45 H5Li(["breadcrumb-item"]<a href="/demos/uim-bootstrap/5/basic/"]Bootstrap 5),") 46 H5Li(["breadcrumb-item"]<a href="/demos/uim-bootstrap/5/basic/utilities"]Utilities),") 47 H5Li(["breadcrumb-item active" aria-current="page"]Flex") 48 ) 49 </nav> 50 ) 51 H5Div(["container mt-3"] 52 H5Div(["row"] 53 H5Div(["col-12 col-lg-2"] 54 ) 55 H5Div(["col-12 col-lg-8"] 56 <h2 ["component display-4"]Flex</h2> 57 <hr> 58 59 H5Div(["mb-5" data-css='.d-flex, .d-inline-flex { 	background-color: #f8f9fa; } .d-flex div { 	border: 1px solid white; 	background-color: #6c757d; 	color: white; 	padding: 0.5rem; } [class*=align-items-], [data-example="alignSelf"], [class*=align-content-] { 	height: 200px; } .responsive-examples { 	display: none; }'> 60 <h3 ["text-muted"]Container", 61 H5Div( 62 H5Div(["d-flex"]Flexbox container) 63 H5Div(["d-inline-flex"]Inline flexbox container) 64 ) 65 ) 66 67 H5Div(["mb-5" data-css='.d-flex, .d-inline-flex { 	background-color: #f8f9fa; } .d-flex div { 	border: 1px solid white; 	background-color: #6c757d; 	color: white; 	padding: 0.5rem; } [class*=align-items-], [data-example="alignSelf"], [class*=align-content-] { 	height: 200px; } .responsive-examples { 	display: none; }'> 68 <h3 ["text-muted"]Direction", 69 H5Div( 70 H5H5(["text-muted", "mt-3"], "Row") 71 H5Div(["d-flex flex-row"] 72 H5Div(Flex direction row) 73 H5Div(Flex direction row) 74 H5Div(Flex direction row) 75 ) 76 H5H5(["text-muted", "mt-3"], "Row-reverse") 77 H5Div(["d-flex flex-row-reverse"] 78 H5Div(Flex direction row-reverse) 79 H5Div(Flex direction row-reverse) 80 H5Div(Flex direction row-reverse) 81 ) 82 H5H5(["text-muted", "mt-3"], "Column") 83 H5Div(["d-flex flex-column"] 84 H5Div(Flex direction column) 85 H5Div(Flex direction column) 86 H5Div(Flex direction column) 87 ) 88 H5H5(["text-muted", "mt-3"], "Column-reverse") 89 H5Div(["d-flex flex-column-reverse"] 90 H5Div(Flex direction column-reverse) 91 H5Div(Flex direction column-reverse) 92 H5Div(Flex direction column-reverse) 93 ) 94 ) 95 ) 96 97 H5Div(["mb-5" data-css='.d-flex, .d-inline-flex { 	background-color: #f8f9fa; } .d-flex div { 	border: 1px solid white; 	background-color: #6c757d; 	color: white; 	padding: 0.5rem; } [class*=align-items-], [data-example="alignSelf"], [class*=align-content-] { 	height: 200px; } .responsive-examples { 	display: none; }'> 98 <h3 ["text-muted"]Justify content", 99 H5Div( 100 H5H5(["text-muted", "mt-3"], "Start") 101 H5Div(["d-flex justify-content-start"] 102 H5Div(Justify content start) 103 H5Div(Justify content start) 104 H5Div(Justify content start) 105 ) 106 H5H5(["text-muted", "mt-3"], "Center") 107 H5Div(["d-flex justify-content-center"] 108 H5Div(Justify content center) 109 H5Div(Justify content center) 110 H5Div(Justify content center) 111 ) 112 H5H5(["text-muted", "mt-3"], "End") 113 H5Div(["d-flex justify-content-end"] 114 H5Div(Justify content end) 115 H5Div(Justify content end) 116 H5Div(Justify content end) 117 ) 118 H5H5(["text-muted", "mt-3"], "Between") 119 H5Div(["d-flex justify-content-between"] 120 H5Div(Justify content between) 121 H5Div(Justify content between) 122 H5Div(Justify content between) 123 ) 124 H5H5(["text-muted", "mt-3"], "Around") 125 H5Div(["d-flex justify-content-around"] 126 H5Div(Justify content around) 127 H5Div(Justify content around) 128 H5Div(Justify content around) 129 ) 130 ) 131 ) 132 133 H5Div(["mb-5" data-css='.d-flex, .d-inline-flex { 	background-color: #f8f9fa; } .d-flex div { 	border: 1px solid white; 	background-color: #6c757d; 	color: white; 	padding: 0.5rem; } [class*=align-items-], [data-example="alignSelf"], [class*=align-content-] { 	height: 200px; } .responsive-examples { 	display: none; }'> 134 <h3 ["text-muted"]Align items", 135 H5Div( 136 H5H5(["text-muted", "mt-3"], "Start") 137 H5Div(["d-flex align-items-start"] 138 H5Div(Align items start) 139 H5Div(Align items start) 140 H5Div(Align items start) 141 ) 142 H5H5(["text-muted", "mt-3"], "Center") 143 H5Div(["d-flex align-items-center"] 144 H5Div(Align items center) 145 H5Div(Align items center) 146 H5Div(Align items center) 147 ) 148 H5H5(["text-muted", "mt-3"], "End") 149 H5Div(["d-flex align-items-end"] 150 H5Div(Align items end) 151 H5Div(Align items end) 152 H5Div(Align items end) 153 ) 154 H5H5(["text-muted", "mt-3"], "Baseline") 155 H5Div(["d-flex align-items-baseline"] 156 H5Div(Align items baseline) 157 H5Div(Align items baseline) 158 H5Div(Align items baseline) 159 ) 160 H5H5(["text-muted", "mt-3"], "Stretch") 161 H5Div(["d-flex align-items-stretch"] 162 H5Div(Align items stretch) 163 H5Div(Align items stretch) 164 H5Div(Align items stretch) 165 ) 166 ) 167 ) 168 169 H5Div(["mb-5" data-css='.d-flex, .d-inline-flex { 	background-color: #f8f9fa; } .d-flex div { 	border: 1px solid white; 	background-color: #6c757d; 	color: white; 	padding: 0.5rem; } [class*=align-items-], [data-example="alignSelf"], [class*=align-content-] { 	height: 200px; } .responsive-examples { 	display: none; }'> 170 <h3 ["text-muted"]Align self", 171 H5Div( 172 H5H5(["text-muted", "mt-3"], "Start") 173 H5Div(["d-flex" data-example="alignSelf"] 174 H5Div(["align-self-start"]Align self start) 175 H5Div(Flex item) 176 H5Div(Flex item) 177 ) 178 H5H5(["text-muted", "mt-3"], "Center") 179 H5Div(["d-flex" data-example="alignSelf"] 180 H5Div(["align-self-center"]Align self center) 181 H5Div(Flex item) 182 H5Div(Flex item) 183 ) 184 H5H5(["text-muted", "mt-3"], "End") 185 H5Div(["d-flex" data-example="alignSelf"] 186 H5Div(["align-self-end"]Align self end) 187 H5Div(Flex item) 188 H5Div(Flex item) 189 ) 190 H5H5(["text-muted", "mt-3"], "Baseline") 191 H5Div(["d-flex" data-example="alignSelf"] 192 H5Div(["align-self-baseline"]Align self baseline) 193 H5Div(Flex item) 194 H5Div(Flex item) 195 ) 196 H5H5(["text-muted", "mt-3"], "Stretch") 197 H5Div(["d-flex" data-example="alignSelf"] 198 H5Div(["align-self-stretch"]Align self stretch) 199 H5Div(Flex item) 200 H5Div(Flex item) 201 ) 202 ) 203 ) 204 205 H5Div(["mb-5" data-css='.d-flex, .d-inline-flex { 	background-color: #f8f9fa; } .d-flex div { 	border: 1px solid white; 	background-color: #6c757d; 	color: white; 	padding: 0.5rem; } [class*=align-items-], [data-example="alignSelf"], [class*=align-content-] { 	height: 200px; } .responsive-examples { 	display: none; }'> 206 <h3 ["text-muted"]Auto margins", 207 H5Div( 208 H5H5(["text-muted", "mt-3"], "Horizontal") 209 H5Div(["d-flex justify-content-start"] 210 H5Div(Flex item) 211 H5Div(Flex item) 212 H5Div(["ms-auto"]Margin left auto) 213 ) 214 H5Div(["d-flex justify-content-end"] 215 H5Div(["me-auto"]Margin right auto) 216 H5Div(Flex item) 217 H5Div(Flex item) 218 ) 219 H5H5(["text-muted", "mt-3"], "Vertical") 220 H5Div(["d-flex flex-column align-items-start"] 221 H5Div(["mb-auto"]Margin bottom auto) 222 H5Div(Flex item) 223 H5Div(Flex item) 224 ) 225 H5Div(["d-flex flex-column align-items-end"] 226 H5Div(Flex item) 227 H5Div(Flex item) 228 H5Div(["mt-auto"]Margin top auto) 229 ) 230 ) 231 ) 232 233 H5Div(["mb-5" data-css='.d-flex, .d-inline-flex { 	background-color: #f8f9fa; } .d-flex div { 	border: 1px solid white; 	background-color: #6c757d; 	color: white; 	padding: 0.5rem; } [class*=align-items-], [data-example="alignSelf"], [class*=align-content-] { 	height: 200px; } .responsive-examples { 	display: none; }'> 234 <h3 ["text-muted"]Fill", 235 H5Div( 236 H5Div(["d-flex"] 237 H5Div(["flex-fill"]Flex fill) 238 H5Div(["flex-fill"]Flex fill) 239 H5Div(["flex-fill"]Flex fill) 240 ) 241 ) 242 ) 243 244 H5Div(["mb-5" data-css='.d-flex, .d-inline-flex { 	background-color: #f8f9fa; } .d-flex div { 	border: 1px solid white; 	background-color: #6c757d; 	color: white; 	padding: 0.5rem; } [class*=align-items-], [data-example="alignSelf"], [class*=align-content-] { 	height: 200px; } .responsive-examples { 	display: none; }'> 245 <h3 ["text-muted"]Grow", 246 H5Div( 247 H5Div(["d-flex"] 248 H5Div(Flex grow) 249 H5Div(Flex grow) 250 H5Div(["flex-grow-1"]Flex grow) 251 ) 252 ) 253 ) 254 255 H5Div(["mb-5" data-css='.d-flex, .d-inline-flex { 	background-color: #f8f9fa; } .d-flex div { 	border: 1px solid white; 	background-color: #6c757d; 	color: white; 	padding: 0.5rem; } [class*=align-items-], [data-example="alignSelf"], [class*=align-content-] { 	height: 200px; } .responsive-examples { 	display: none; }'> 256 <h3 ["text-muted"]Shrink", 257 H5Div( 258 H5Div(["d-flex"] 259 H5Div(["w-50"]Flex shrink) 260 H5Div(["w-50"]Flex shrink) 261 H5Div(["flex-shrink-1"]Flex shrink) 262 ) 263 ) 264 ) 265 266 H5Div(["mb-5" data-css='.d-flex, .d-inline-flex { 	background-color: #f8f9fa; } .d-flex div { 	border: 1px solid white; 	background-color: #6c757d; 	color: white; 	padding: 0.5rem; } [class*=align-items-], [data-example="alignSelf"], [class*=align-content-] { 	height: 200px; } .responsive-examples { 	display: none; }'> 267 <h3 ["text-muted"]Wrap", 268 H5Div( 269 H5H5(["text-muted", "mt-3"], "Nowrap") 270 H5Div(["d-flex flex-nowrap"] 271 H5Div(Flex-wrap nowrap) 272 H5Div(Flex-wrap nowrap) 273 H5Div(Flex-wrap nowrap) 274 H5Div(Flex-wrap nowrap) 275 H5Div(Flex-wrap nowrap) 276 H5Div(Flex-wrap nowrap) 277 H5Div(Flex-wrap nowrap) 278 H5Div(Flex-wrap nowrap) 279 H5Div(Flex-wrap nowrap) 280 H5Div(Flex-wrap nowrap) 281 ) 282 H5H5(["text-muted", "mt-3"], "Wrap") 283 H5Div(["d-flex flex-wrap"] 284 H5Div(Flex-wrap wrap) 285 H5Div(Flex-wrap wrap) 286 H5Div(Flex-wrap wrap) 287 H5Div(Flex-wrap wrap) 288 H5Div(Flex-wrap wrap) 289 H5Div(Flex-wrap wrap) 290 H5Div(Flex-wrap wrap) 291 H5Div(Flex-wrap wrap) 292 H5Div(Flex-wrap wrap) 293 H5Div(Flex-wrap wrap) 294 ) 295 H5H5(["text-muted", "mt-3"], "Wrap-reverse") 296 H5Div(["d-flex flex-wrap-reverse"] 297 H5Div(Flex-wrap reverse) 298 H5Div(Flex-wrap reverse) 299 H5Div(Flex-wrap reverse) 300 H5Div(Flex-wrap reverse) 301 H5Div(Flex-wrap reverse) 302 H5Div(Flex-wrap reverse) 303 H5Div(Flex-wrap reverse) 304 H5Div(Flex-wrap reverse) 305 H5Div(Flex-wrap reverse) 306 H5Div(Flex-wrap reverse) 307 ) 308 ) 309 ) 310 311 H5Div(["mb-5" data-css='.d-flex, .d-inline-flex { 	background-color: #f8f9fa; } .d-flex div { 	border: 1px solid white; 	background-color: #6c757d; 	color: white; 	padding: 0.5rem; } [class*=align-items-], [data-example="alignSelf"], [class*=align-content-] { 	height: 200px; } .responsive-examples { 	display: none; }'> 312 <h3 ["text-muted"]Order", 313 <p>order-first (-1), order-0 to order-5 and order-last (6)") 314 H5Div( 315 H5Div(["d-flex"] 316 H5Div(["order-last"]First, but last) 317 H5Div(["order-3"]Second, but number 5) 318 H5Div(["order-2"]Third, but number 4) 319 H5Div(["order-1"]Fourth, but number 3) 320 H5Div(["order-first"]Fifth, but first) 321 H5Div(Last, but unordered, so number 2) 322 ) 323 ) 324 ) 325 326 H5Div(["mb-5" data-css='.d-flex, .d-inline-flex { 	background-color: #f8f9fa; } .d-flex div { 	border: 1px solid white; 	background-color: #6c757d; 	color: white; 	padding: 0.5rem; } [class*=align-items-], [data-example="alignSelf"], [class*=align-content-] { 	height: 200px; } .responsive-examples { 	display: none; }'> 327 <h3 ["text-muted"]Align content", 328 H5Div( 329 H5H5(["text-muted", "mt-3"], "Start") 330 H5Div(["d-flex align-content-start flex-wrap"] 331 H5Div(Align content start) 332 H5Div(Align content start) 333 H5Div(Align content start) 334 H5Div(Align content start) 335 H5Div(Align content start) 336 H5Div(Align content start) 337 H5Div(Align content start) 338 H5Div(Align content start) 339 H5Div(Align content start) 340 H5Div(Align content start) 341 ) 342 H5H5(["text-muted", "mt-3"], "Center") 343 H5Div(["d-flex align-content-center flex-wrap"] 344 H5Div(Align content center) 345 H5Div(Align content center) 346 H5Div(Align content center) 347 H5Div(Align content center) 348 H5Div(Align content center) 349 H5Div(Align content center) 350 H5Div(Align content center) 351 H5Div(Align content center) 352 H5Div(Align content center) 353 H5Div(Align content center) 354 ) 355 H5H5(["text-muted", "mt-3"], "End") 356 H5Div(["d-flex align-content-end flex-wrap"] 357 H5Div(Align content end) 358 H5Div(Align content end) 359 H5Div(Align content end) 360 H5Div(Align content end) 361 H5Div(Align content end) 362 H5Div(Align content end) 363 H5Div(Align content end) 364 H5Div(Align content end) 365 H5Div(Align content end) 366 H5Div(Align content end) 367 ) 368 H5H5(["text-muted", "mt-3"], "Between") 369 H5Div(["d-flex align-content-between flex-wrap"] 370 H5Div(Align content between) 371 H5Div(Align content between) 372 H5Div(Align content between) 373 H5Div(Align content between) 374 H5Div(Align content between) 375 H5Div(Align content between) 376 H5Div(Align content between) 377 H5Div(Align content between) 378 H5Div(Align content between) 379 H5Div(Align content between) 380 ) 381 H5H5(["text-muted", "mt-3"], "Around") 382 H5Div(["d-flex align-content-around flex-wrap"] 383 H5Div(Align content around) 384 H5Div(Align content around) 385 H5Div(Align content around) 386 H5Div(Align content around) 387 H5Div(Align content around) 388 H5Div(Align content around) 389 H5Div(Align content around) 390 H5Div(Align content around) 391 H5Div(Align content around) 392 H5Div(Align content around) 393 ) 394 H5H5(["text-muted", "mt-3"], "Stretch") 395 H5Div(["d-flex align-content-stretch flex-wrap"] 396 H5Div(Align content stretch) 397 H5Div(Align content stretch) 398 H5Div(Align content stretch) 399 H5Div(Align content stretch) 400 H5Div(Align content stretch) 401 H5Div(Align content stretch) 402 H5Div(Align content stretch) 403 H5Div(Align content stretch) 404 H5Div(Align content stretch) 405 H5Div(Align content stretch) 406 ) 407 ) 408 ) 409 410 H5Div(["mb-5" data-css='.d-flex, .d-inline-flex { 	background-color: #f8f9fa; } .d-flex div { 	border: 1px solid white; 	background-color: #6c757d; 	color: white; 	padding: 0.5rem; } [class*=align-items-], [data-example="alignSelf"], [class*=align-content-] { 	height: 200px; } .responsive-examples { 	display: none; }'> 411 <h3 ["text-muted"]Responsive examples", 412 <p>Responsive utility classes exist for all the flexbox utilities: display, flex-direction, justify-content, align-items, align-self, flex-wrap, order and align-content. The examples are hidden on the screen, but can be viewed in the source code or by clicking "Toggle code" below.") 413 H5Div( 414 H5Div(["responsive-examples"] 415 H5Div(["d-sm-flex"]Display flex for small devices and up) 416 H5Div(["d-md-inline-flex"]Display inline-flex for medium devices and up) 417 H5Div(["d-flex flex-lg-row"]Display flex for all devices and set flex direction to row for large devices and up) 418 H5Div(["d-flex flex-xl-row-reverse"]Display flex for all devices and set flex direction to row-reverse for extra large devices and up) 419 H5Div(["d-flex flex-xxl-column"]Display flex for all devices and set flex direction to column for extra extra large devices and up) 420 H5Div(["d-flex flex-sm-column-reverse"]Display flex for all devices and set flex direction to column-reverse for small devices and up) 421 H5Div(["d-flex justify-content-md-start"]Display flex for all devices and justify content to the start for medium devices and up) 422 H5Div(["d-flex justify-content-lg-center"]Display flex for all devices and justify content to the center for large devices and up) 423 H5Div(["d-flex justify-content-xl-end"]Display flex for all devices and justify content to the end for extra large devices and up) 424 H5Div(["d-flex justify-content-xxl-between"]Display flex for all devices and justify content between for extra extra large devices and up) 425 H5Div(["d-flex justify-content-sm-around"]Display flex for all devices and justify content around for small devices and up) 426 H5Div(["d-flex align-items-md-start"]Display flex for all devices and align items to the start for medium devices and up) 427 H5Div(["d-flex align-items-lg-center"]Display flex for all devices and align items to the center for large devices and up) 428 H5Div(["d-flex align-items-xl-end"]Display flex for all devices and align items to the end for extra large devices and up) 429 H5Div(["d-flex align-items-xxl-baseline"]Display flex for all devices and align items to the baseline for extra extra large devices and up) 430 H5Div(["d-flex align-items-sm-stretch"]Display flex for all devices and align items to stretch for small devices and up) 431 H5Div(["d-flex"] 432 H5Div(["align-self-md-start"]Align self to the start for medium devices and up) 433 ) 434 H5Div(["d-flex"] 435 H5Div(["align-self-lg-center"]Align self to the center for large devices and up) 436 ) 437 H5Div(["d-flex"] 438 H5Div(["align-self-xl-end"]Align self to the end for extra large devices and up) 439 ) 440 H5Div(["d-flex"] 441 H5Div(["align-self-xxl-baseline"]Align self to the baseline for extra extra large devices and up) 442 ) 443 H5Div(["d-flex"] 444 H5Div(["align-self-sm-stretch"]Align self to stretch for small devices and up) 445 ) 446 H5Div(["d-flex"] 447 H5Div(["flex-md-fill"]Fill item for medium devices and up) 448 ) 449 H5Div(["d-flex"] 450 H5Div(["flex-lg-grow-1"]Grow item for large devices and up) 451 ) 452 H5Div(["d-flex"] 453 H5Div(["flex-xl-shrink-1"]Shrink item for extra large devices and up) 454 ) 455 H5Div(["d-flex flex-xxl-nowrap"]Display flex for all devices and make items not wrap for extra extra large devices and up) 456 H5Div(["d-flex flex-sm-wrap"]Display flex for all devices and make items wrap for small devices and up) 457 H5Div(["d-flex flex-md-wrap-reverse"]Display flex for all devices and make items wrap in reverse for medium devices and up) 458 H5Div(["d-flex"] 459 H5Div(["order-lg-3"]Set the order to 3 for large devices and up) 460 H5Div(["order-xl-2"]Set the order to 2 for extra large devices and up) 461 H5Div(["order-xxl-1"]Set the order to 1 for extra extra large devices and up) 462 ) 463 H5Div(["d-flex align-content-sm-start"]Display flex for all devices and align content to the start for small devices and up) 464 H5Div(["d-flex align-content-md-center"]Display flex for all devices and align content to the center for medium devices and up) 465 H5Div(["d-flex align-content-lg-end"]Display flex for all devices and align content to the end for large devices and up) 466 H5Div(["d-flex align-content-xl-around"]Display flex for all devices and align content around for extra large devices and up) 467 H5Div(["d-flex align-content-xxl-stretch"]Display flex for all devices and align content to stretch for extra extra large devices and up) 468 ) 469 ) 470 ) 471 472 ) 473 ) 474 ) 475 </main> 476 477 `; 478 } 479 }); 480 } */