Home Explore Help
Sign In
cpp
/
RmlUi
mirror of https://github.com/mikke89/RmlUi.git
2
0
Fork 0
Files Issues 0 Wiki
Branch: databinding_expressions
Branches Tags
RmlUi
/
Tests
/
Data
/
VisualTests
/
flex_02.rml

flex_02.rml 2.2 KB
Permalink History Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172 
  1. <rml>
    2. 

  2. <head>
    3. 

  3.     <link type="text/rcss" href="/../Tests/Data/style.rcss" />
    4. 

  4.     <title>Flex 02 - Various features</title>
    5. 

  5. 	<meta name="Description" content="Testing various flexible box layout features. Should be comparable to the output in a web browser." />
    6. 

  6.     <style>
    7. 

  7.         .flex-container {
    8. 

  8.             display: flex;
    9. 

  9.             margin: 10dp 20dp;
    10. 

  10.             background-color: #333;
    11. 

  11.             max-height: 210dp;
    12. 

  12.             flex-wrap: wrap-reverse;
    13. 

  13.         }
    14. 

  14. 

  15.         .flex-item {
    16. 

  16.             width: 50dp;
    17. 

  17.             margin: 20dp;
    18. 

  18.             background-color: #eee;
    19. 

  19.             height: 50dp;
    20. 

  20.             text-align: center;
    21. 

  21.         }
    22. 

  22. 

  23.         .flex-direction-row {
    24. 

  24.             flex-direction: row;
    25. 

  25.         }
    26. 

  26.         .flex-direction-row-reverse {
    27. 

  27.             flex-direction: row-reverse;
    28. 

  28.         }
    29. 

  29.         .flex-direction-column {
    30. 

  30.             flex-direction: column;
    31. 

  31.         }
    32. 

  32.         .flex-direction-column-reverse {
    33. 

  33.             flex-direction: column-reverse;
    34. 

  34.         }
    35. 

  35.         .absolute {
    36. 

  36.             margin: 0;
    37. 

  37.             position: absolute;
    38. 

  38.             right: 0;
    39. 

  39.             bottom: 10dp;
    40. 

  40.         }
    41. 

  41.     </style>
    42. 

  42. </head>
    43. 

  43. 

  44. <body>
    45. 

  45.     <div class="flex-container flex-direction-row" style="position: relative">
    46. 

  46.         <div class="flex-item absolute">Abs</div>
    47. 

  47.         <div class="flex-item" style="margin: 50dp;">1</div>
    48. 

  48.         <div class="flex-item" style="margin-top: auto">2</div>
    49. 

  49.         <div class="flex-item" style="margin: auto">3</div>
    50. 

  50.     </div>
    51. 

  51. 

  52.     <div class="flex-container flex-direction-row-reverse" style="height: 200dp; justify-content: space-around;">
    53. 

  53.         <div class="flex-item">1</div>
    54. 

  54.         <div class="flex-item" style="margin-bottom: auto;">2</div>
    55. 

  55.         <div class="flex-item" style="margin-right: 40dp;">3</div>
    56. 

  56.     </div>
    57. 

  57. 

  58.     <div class="flex-container flex-direction-column">
    59. 

  59.         <div class="flex-item" id="test" style="margin-right: auto">1</div>
    60. 

  60.         <div class="flex-item">2</div>
    61. 

  61.         <div class="flex-item">3</div>
    62. 

  62.     </div>
    63. 

  63. 

  64.     <div class="flex-container flex-direction-column-reverse">
    65. 

  65.         <div class="flex-item">1</div>
    66. 

  66.         <div class="flex-item">2 LONG_OVERFLOWING_WORD</div>
    67. 

  67.         <div class="flex-item">3</div>
    68. 

  68.     </div>
    69. 

  69. 

  70.     <handle size_target="#document"/>
    71. 

  71. </body>
    72. 

  72. </rml>
    73.