Acasă Explorează Ajutor
Autentificare
cpp
/
RmlUi
oglindă de https://github.com/mikke89/RmlUi.git
2
0
Bifurcare 0
Fisiere Probleme 0 Wiki
Ramură: improve-expand-string
Ramuri Etichete
RmlUi
/
Tests
/
Data
/
VisualTests
/
flex_direction.rml

flex_direction.rml 2.0 KB
Permalink Istoric Crud

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071 
  1. <rml>
    2. 

  2. <head>
    3. 

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

  4. 	<title>CSS Test: flex flow direction</title>
    5. 

  5. 	<link href="https://test.csswg.org/suites/css-flexbox-1_dev/nightly-unstable/xhtml1/flex-direction.xht" rel="source" />
    6. 

  6. 	<link href="http://www.github.com/sskyy" rel="author" title="houzhenyu" />
    7. 

  7. 	<link href="http://www.w3.org/TR/css-flexbox-1/#flex-direction" rel="help" />
    8. 

  8. 	<link href="reference/flex_direction-ref.rml" rel="match" />
    9. 

  9. 	<meta content="The flow of flex items in the the flex container should observe the flex-direction property." name="assert" />
    10. 

  10. 	<style>
    11. 

  11. 		.flex-container {
    12. 

  12. 			display: flex;
    13. 

  13. 			margin: 20dp;
    14. 

  14. 			background-color: #333;
    15. 

  15. 		}
    16. 

  16. 

  17. 		.flex-item {
    18. 

  18. 			width: 50dp;
    19. 

  19. 			height: 50dp;
    20. 

  20. 			margin: 20dp;
    21. 

  21. 			background-color: #eee;
    22. 

  22. 			line-height: 50dp;
    23. 

  23. 			text-align: center;
    24. 

  24. 		}
    25. 

  25. 

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

  27. 			flex-direction: row;
    28. 

  28. 		}
    29. 

  29. 		.flex-container.flex-direction-row-reverse {
    30. 

  30. 			flex-direction: row-reverse;
    31. 

  31. 		}
    32. 

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

  33. 			flex-direction: column;
    34. 

  34. 		}
    35. 

  35. 		.flex-container.flex-direction-column-reverse {
    36. 

  36. 			flex-direction: column-reverse;
    37. 

  37. 		}
    38. 

  38. 	</style>
    39. 

  39. </head>
    40. 

  40. <body>
    41. 

  41. 	<h1>flex-direction:row</h1>
    42. 

  42. 	<div class="flex-container flex-direction-row">
    43. 

  43. 		<div class="flex-item">1</div>
    44. 

  44. 		<div class="flex-item">2</div>
    45. 

  45. 		<div class="flex-item">3</div>
    46. 

  46. 	</div>
    47. 

  47. 

  48. 	<h1>flex-direction:row-reverse</h1>
    49. 

  49. 	<div class="flex-container flex-direction-row-reverse">
    50. 

  50. 		<div class="flex-item">1</div>
    51. 

  51. 		<div class="flex-item">2</div>
    52. 

  52. 		<div class="flex-item">3</div>
    53. 

  53. 	</div>
    54. 

  54. 

  55. 	<h1>flex-direction:column</h1>
    56. 

  56. 	<div class="flex-container flex-direction-column">
    57. 

  57. 		<div class="flex-item">1</div>
    58. 

  58. 		<div class="flex-item">2</div>
    59. 

  59. 		<div class="flex-item">3</div>
    60. 

  60. 	</div>
    61. 

  61. 

  62. 	<h1>flex-direction:column-reverse</h1>
    63. 

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

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

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

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

  67. 	</div>
    68. 

  68. 

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

  70. </body>
    71. 

  71. </rml>
    72.