diff options
| author | Tobias Christiansen <tobi@tobyase.de> | 2021-07-16 18:52:18 +0200 |
|---|---|---|
| committer | Ali Mohammad Pur <Ali.mpfard@gmail.com> | 2021-07-19 18:47:09 +0430 |
| commit | 022966310268a26b5aea0394924894415520dc8c (patch) | |
| tree | 6066f4a44c40b2056e8ff7b712562766c3e29ce1 /Base/res | |
| parent | 439d955471538f4f0d77169928eb667e58c8ea82 (diff) | |
| download | serenity-022966310268a26b5aea0394924894415520dc8c.zip | |
Base: Add a test page for the 'justify-content' CSS property
This adds a simple page to showcase the justify-content CSS-property.
Diffstat (limited to 'Base/res')
| -rw-r--r-- | Base/res/html/misc/justify-content.html | 81 | ||||
| -rw-r--r-- | Base/res/html/misc/welcome.html | 1 |
2 files changed, 82 insertions, 0 deletions
diff --git a/Base/res/html/misc/justify-content.html b/Base/res/html/misc/justify-content.html new file mode 100644 index 0000000000..fcb053c171 --- /dev/null +++ b/Base/res/html/misc/justify-content.html @@ -0,0 +1,81 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Flexbox justify-content test</title> + <style> + #container > div { + display: flex; + border: 1px solid cyan; + width: 350px; + } + + #container > div > div { + width: 50px; + height: 50px; + background: magenta; + border: 1px solid black; + } + + #flex-start { + justify-content: flex-start; + } + + #center { + justify-content: center; + } + + #flex-end { + justify-content: flex-end; + } + + #space-between { + justify-content: space-between; + } + + #space-around { + justify-content: space-around; + } + + </style> +</head> +<body> +<h1>CSS Flexbox justify-content test</h1> +<div id="container"> + <p>justify-content: flex-start</p> + <div id="flex-start"> + <div>1</div> + <div>2</div> + <div>3</div> + </div> + + <p>justify-content: flex-end</p> + <div id="flex-end"> + <div>1</div> + <div>2</div> + <div>3</div> + </div> + + <p>justify-content: center</p> + <div id="center"> + <div>1</div> + <div>2</div> + <div>3</div> + </div> + + <p>justify-content: space-between</p> + <div id="space-between"> + <div>1</div> + <div>2</div> + <div>3</div> + </div> + + <p>justify-content: space-around</p> + <div id="space-around"> + <div>1</div> + <div>2</div> + <div>3</div> + </div> +</div> + +</body> +</html> diff --git a/Base/res/html/misc/welcome.html b/Base/res/html/misc/welcome.html index 785b097625..fdaafa4972 100644 --- a/Base/res/html/misc/welcome.html +++ b/Base/res/html/misc/welcome.html @@ -46,6 +46,7 @@ <p>This page loaded in <b><span id="loadtime"></span></b> ms</p> <p>Some small test pages:</p> <ul> + <li><a href="justify-content.html">Flexbox justify-content</a></li> <li><a href="lists.html">Lists</a></li> <li><a href="border-radius.html">Border-Radius</a></li> <li><a href="custom-properties.html">Custom Properties</a></li> |