cpp
/
RmlUi
同期ミラー https://github.com/mikke89/RmlUi.git


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
							<rml>
<head>
	<title>Flex 01 - Basic flexbox layout</title>
	<link type="text/rcss" href="../style.rcss"/>
	<link rel="help" href="https://drafts.csswg.org/css-flexbox/" />
	<meta name="Description" content="Basic flexible box layout." />
	<meta name="Animation" content="Hover over the articles to animate their size." />
	<style>
		header, article { display: block; }
		h1 { font-size: 1.5em; }
		h2 { font-size: 1.3em; }

		header {
			background-color: #9777d9;
			border: 5dp #666;
		}
		h1 {
			text-align: center;
			color: white;
			line-height: 100dp;
		}
		section {
			display: flex;
			background: #666;
			border: 5dp #666;
		}
		article {
			padding: 10dp;
			margin: 0 5dp;
			background-color: #edd3c0;
			flex: 1;
			transition: 0.3s flex-grow cubic-out;
		}
		article:hover {
			flex: 1.2;
			background-color: #fde3d0;
		}
		h2 {
			text-align: center;
			background-color: #eb6e14;
			margin: -10dp -10dp 0;
			padding: 10dp 0;
		}
		article:hover h2 {
			background-color: #fb7e24;
		}
	</style>
</head>

<body>
<header>
	<h1>Header</h1>
</header>
<section>
	<article>
		<h2>First article</h2>
		<p>Etiam libero lorem, lacinia non augue lobortis, tincidunt consequat justo. Sed id enim tempor, feugiat tortor id, rhoncus enim. Quisque pretium neque eu felis tincidunt fringilla. Mauris laoreet enim neque, iaculis cursus lorem mollis sed. Nulla pretium euismod nulla sed convallis. Curabitur in tempus sem. Phasellus suscipit vitae nulla nec ultricies.</p>
	</article>
	<article>
		<h2>Second article</h2>
		<p>Ut volutpat, odio et facilisis molestie, lacus elit euismod enim, et tempor lacus sapien finibus ipsum. Aliquam erat volutpat. Nullam risus turpis, hendrerit ac fermentum in, dapibus non risus.</p>
	</article>
	<article>
		<h2>Third article</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet commodo nisi, id cursus enim eleifend vitae. Praesent turpis lorem, commodo id tempus sit amet, faucibus et libero. Aliquam malesuada ultrices leo, ut molestie tortor posuere sit amet. Proin vitae tortor a sem consequat gravida. Maecenas sed egestas dolor.</p>
		<p>In gravida ligula in turpis molestie varius. Ut sed velit id tellus aliquet aliquet. Nulla et leo tellus. Ut a convallis dolor, eu rutrum enim. Nam vitae ultrices dui. Aliquam semper eros ut ultrices rutrum.</p>
	</article>
</section>
<handle size_target="#document"/>
</body>
</rml>