Scribd
Upload
25 views

Lab 8

The document describes the use of flexbox for layout of a webpage. It uses flexbox properties like flex-direction, flex, and media queries to create a responsive layout with a header, navigation bar, and content section. On larger screens it displays the navigation bar and content side by side. On smaller screens it stacks them vertically by changing the flex-direction and flex values with media queries.

Uploaded by

Charlotte Skråmestø
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
25 views

Lab 8

The document describes the use of flexbox for layout of a webpage. It uses flexbox properties like flex-direction, flex, and media queries to create a responsive layout with a header, navigation bar, and content section. On larger screens it displays the navigation bar and content side by side. On smaller screens it stacks them vertically by changing the flex-direction and flex values with media queries.

Uploaded by

Charlotte Skråmestø
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

 

Lab 8
• Block, for sections in a webpage • Inline, for text • Table, for two-dimensional table data •
Positioned, for explicit position of an element
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Flex layout template</title>
<style>
/* Removing all the default margins */
*{
margin: 0;
box-sizing: border-box;
}
/* The whole page is a flex container */
body {
display: flex;
flex-direction: column;
}
/* Header and footer same styles.
Flex containers with their elements centered horizontally and vertically */
header,
footer {
height: 10vh;
display: flex;
align-items: center;
background-color: lightblue;
justify-content: center;
}
/* Row with "2 columns". The flex items will be strech to fill the container*/
main {
display: flex;
flex-direction: row;
height: 80vh;
align-items: stretch;
}
nav {
flex: 20;
display: flex;
flex-direction: column;
background-color: lightcoral;
}
/* nav ul is a flex container where flex items are placed in columns */
nav>ul {
padding-left: 0;
flex: 1;
display: flex;
flex-direction: column;
list-style: none;
}
nav>ul>li {
/* flex: 1;
is the same as saying flex: 1 1 auto;
or in other words,
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;*/
flex: 1;
/* all the elemnts will be flex container
so that we can align them vertically and horizontally */
display: flex;
justify-content: center;
align-items: center;
}
nav>ul>li:hover {
box-shadow: 0px 0px 5px 0px black;
}
nav a {
text-transform: uppercase;
text-decoration: none;
color: black;
}
section {
flex: 80;
background-color: lightgreen;
overflow: auto;
display: flex;
flex-direction: column;
}
section>* {
text-align: justify;
margin: 5% 5% 0 5%;
}
section>*:last-child {
margin-bottom: 5%;
}
/* With small screens we change the layout:
NOTE: Newer "design" practices advocates for going movile first
which means that the page would be implemented first considering small screens
and then use the media queries for styling larger screens. In other words, the opposite
of what we are doing here.
*/
@media only screen and (max-width: 600px) {
main {
flex-direction: column;
}
nav,
nav ul {
flex-direction: row;
}
nav {
flex: 10;
}
section {
flex: 90;
}
}
</style>
</head>
<body>
<header>
&lt;header&gt;
</header>
<main>
<nav>
<ul>
<li><a href="#">&lt;section&gt;</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
<li><a href="#">Page 4</a></li>
<li><a href="#">Page 5</a></li>
</ul>
</nav>
<section>
<article>
<h2>Article 1</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
Cum
sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
pellentesque
eu, pretium
quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget,
a
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
Cum
sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
pellentesque
eu, pretium
quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget,
arcu.

</p>
</article>
<article>
<h2>Article 2</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
Cum
sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
pellentesque
eu, pretium
quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget,
arcu.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
Cum
sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
pellentesque
eu, pretium
quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget,
arcu.
</p>
</article>
</section>
</main>
<footer>
&lt;footer&gt;
</footer>
</body>
</html>

You might also like