<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Flex Adaptative Content</title>
<style>
header,
footer,
nav,
article,
aside {
border: 1px solid #777;
background-color: #777;
padding: 0.25em;
margin: 0.25em;
border-radius: 0.25em;
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
}
.vertical-box {
/* previous syntax */
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-ms-box-orient: vertical;
box-orient: vertical;
/* current syntax */
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: flex;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.horizontal-box {
/* previous syntax */
display: -webkit-box;
display: -moz-box;
display: -ms-box;
display: box;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-ms-box-orient: horizontal;
box-orient: horizontal;
/* current syntax */
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: flex;
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
}
.space-between {
/* previous syntax */
-webkit-box-pack: justify;
-moz-box-pack: justify;
-ms-box-pack: justify;
box-pack: justify;
/* current syntax */
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;
}
header,
footer {
height: 100px;
}
.container {
/* previous syntax */
-webkit-box-flex: 1;
-moz-box-flex: 1;
-ms-box-flex: 1;
box-flex: 1;
/* current syntax */
-webkit-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
flex: 1;
}
article {
/* previous syntax */
-webkit-box-flex: 5;
-moz-box-flex: 5;
-ms-box-flex: 5;
box-flex: 5;
/* current syntax */
-webkit-flex: 5;
-moz-flex: 5;
-ms-flex: 5;
flex: 5;
}
aside,
nav {
/* previous syntax */
-webkit-box-flex: 1;
-moz-box-flex: 1;
-ms-box-flex: 1;
box-flex: 1;
/* current syntax */
-webkit-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
flex: 1;
}
</style>
</head>
<body class="vertical-box">
<header>Header</header>
<section class="container horizontal-box space-between">
<nav>Nav</nav>
<article>Article</article>
<aside>Aside</aside>
</section>
<footer>Footer</footer>
</body>
</html>
Example with CSS Flexbox. Adjusting the content to the size of the screen.
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.