42 lines
No EOL
1.4 KiB
HTML
42 lines
No EOL
1.4 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Insert title here</title>
|
||
<link href="test.css" charset="UTF-8" type="text/css" rel="stylesheet" />
|
||
<script type="text/javascript" src="test.js"></script>
|
||
|
||
</head>
|
||
<body>
|
||
|
||
<header>
|
||
<h1>Flex Demo</h1>
|
||
</header>
|
||
|
||
<div class="imixs-workitem">
|
||
|
||
|
||
<div class="imixs-workitem-form">
|
||
<h2>The Form</h2>
|
||
<p>Note that that browser support for these values is nuanced.
|
||
For example, space-between never got support from some versions of
|
||
Edge, and start/end/left/right aren’t in Chrome yet. MDN has
|
||
detailed charts. The safest values are flex-start, flex-end, and
|
||
center. There are also two additional keywords you can pair with
|
||
these values: safe and unsafe. Using safe ensures that however you
|
||
do this type of positioning, you can’t push an element such that it
|
||
renders off-screen (e.g. off the top) in such a way the content
|
||
can’t be scrolled too (called “data loss”).</p>
|
||
</div>
|
||
<div class="imixs-slider"></div>
|
||
<div class="imixs-workitem-chronicle">
|
||
<h2>The Chronicle</h2>
|
||
<p>
|
||
nowrap top.
|
||
|
||
|
||
start/end/left/right aren’t in Chrome yet. MDN has detailed charts. The safest values are flex-start, flex-end, and center. There are also two additional keywords you can pair with these values: safe and unsafe. Using safe ensures that however you do this type of positioning, you can’t push an element such that it</p>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html> |