Flex w/ Media Queries Flex with Media Queries Overview Write style rules to make a Flex layout out of div.flex-container Flex layout requirements: all flex items should have a main size (size along its main axis) of 100px flex items should wrap if there is no available space the layout should have a horizontal main axis when the viewport width is greater than 800px the layout should have a vertical main axis when the viewport is less than 800px width Remove bullet points on list items Your rule should only remove bullets from list items that are children of flex.container one flex item must have a greater grow factor than the other flex items to fill available space along the main-axis the flex item that grows more should change when the main axis switches from horizontal to vertical The content of each flex item should be horizontally and vertically centered Write your styles directly in this HTML document's embedded stylesheet Do not edit the HTML below! Instead, work in the stylesheet in the head element of this file. flex.container is just below this h3 element! 1 2 3 4 5 6 7 8 9 10 11 12 Back Home!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./../styles/styles.css">
<link rel="stylesheet" href="./../styles/grid.css">
<script src="https://kit.fontawesome.com/7f74e4e346.js" crossorigin="anonymous"></script>
<title>Flex w/ Media Queries</title>
<style>
/* Write your styles here! */
.flex-container {
padding: 0; /* keep the padding at 0 */
height: 500px; /* you can adjust the height as you see fit */
background: white; /* you can adjust the background as you see fit */
color: black; /* you can adjust the text color as you see fit */
}
</style>
</head>
<body>
<section>
<header>
<h1><span><i class="fab fa-buromobelexperte"></i>Flex with Media Queries</span> <a href="./../index.html"><i class="fas fa-home"></i></a></h1>
</header>
</section>
<section>
<h3>Overview</h3>
<ul>
<li>Write style rules to make a Flex layout out of <code>div.flex-container</code></li>
<li>Flex layout requirements:
<ul>
<li>all flex items should have a main size (size along its main axis) of 100px</li>
<li>flex items should wrap if there is no available space</li>
<li>the layout should have a horizontal main axis when the viewport width is greater than 800px</li>
<li>the layout should have a vertical main axis when the viewport is less than 800px width</li>
</ul>
<li>Remove bullet points on list items
<ul>
<li>Your rule should only remove bullets from list items that are children of <code>flex.container</code></li>
</ul>
</li>
<li>one flex item must have a greater grow factor than the other flex items to fill available space along the main-axis
<ul>
<li>the flex item that grows more should change when the main axis switches from horizontal to vertical</li>
</ul>
</li>
<li>The content of each flex item should be horizontally and vertically centered</li>
<li>Write your styles directly in this HTML document's embedded stylesheet</li>
</ul>
<p><em>Do not edit the HTML below!</em> Instead, work in the stylesheet in the <code>head</code> element of this file.</p>
</section>
<section>
<h3><code>flex.container</code> is just below this <code>h3</code> element!</h3>
<!-- Do not edit/change the HTML, work within the stylesheet above -->
<ul class="flex-container">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
<li class="flex-item">6</li>
<li class="flex-item">7</li>
<li class="flex-item">8</li>
<li class="flex-item">9</li>
<li class="flex-item">10</li>
<li class="flex-item">11</li>
<li class="flex-item">12</li>
</ul>
</section>
<section>
<a href="./../index.html">
<footer>
<span>Back Home!</span>
<i class="fas fa-arrow-right"></i>
</footer>
</a>
</section>
</body>
</html>
Step by step
Solved in 2 steps
