Essential Question: How can I use the CSS flex box to format my page for different screen sizes?
Mastery Objectives:
SWBAT align CSS elements using the main axis and the cross axis.
SWBAT use flex box attributes correctly.
SWBAT format their items to shrink or grow in reaction to the browser measurements.
In this project, you will follow step-by-step instructions to fix a to-do web app. All of the HTML and most of the CSS is intact, however, a few Flexbox values are missing.
Start off by turning some of the elements into flex and inline-flex containers. CSS Flexbox Container
Turn elements with the class container and elements with the class square into flex containers.
Turn elements with the class week and elements with the class reminders into inline-flex containers.
To do this, add the display property with a value of either flex or inline-flex.
The elements inside the new inline-flex containers should grow to fill the container. This is accomplished using the flex-grow property:
Elements with the class week will get a flex-grow property with a value of 3.
Elements with the class reminders will get a flex-grow property with a value of 2.
We want the flex items with the class week to be ordered vertically, instead of horizontally.
Inside the .week ruleset, add a flex-direction property with the value that orders the items in a column.
The items with the class row should move to the next line when the container gets too small.
Inside the .row ruleset, add a flex-wrap property with the value that moves items to the next row, while keeping their order intact.
The items with the class row also need some space:
Inside the .row ruleset, add a justify-content property with the value that adds space around each item.
Furthermore, the items with the class square need to be centered:
Inside the .square ruleset, add a justify-content property with the value that centers the items in the container.
Lastly, the elements with the class row and elements with the class square need to be aligned vertically:
Inside the rulesets for .row and .square, add the align-items property with the value that centers the items inside the container.
/* Universal Styles */
body {
margin: 0px;
background-color: whitesmoke;
font-family: 'Rock Salt', cursive;
text-align: center;
}
.secondary-background {
background-color: snow;
}
.tagline {
font-family: 'Quicksand', sans-serif;
color: lightslategrey;
line-height: 125px;
}
/* Header */
h1 {
margin: 0;
background-color: steelblue;
line-height: 100px;
color: khaki;
}
h2 {
margin: 10px;
}
/* App Container */
.container {
border: 2px solid snow;
}
/* To Do Section */
.week {
}
.row {
min-height: 200px;
display: flex;
}
.square {
width: 125px;
height: 125px;
padding: 10px;
}
.day.square {
background-color: steelblue;
border: 1px solid white;
}
.task.square {
background-color: khaki;
border: 1px solid white;
}
.task p {
font-family: 'Quicksand', sans-serif;
font-weight: 700;
font-size: 12px;
}
/* Reminders */
.reminders {
background-color: khaki;
}
.reminders h3 {
width: 100%;
margin: 10px;
color: black;
line-height: 90px;
font-size: 24px;
}
/* Footer */
footer {
font-size: 24px;
}
<!DOCTYPE html>
<html>
<head>
<title>To Do App</title>
<link rel='stylesheet' href='style.css'>
<link href='https://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet'>
</head>
<body>
<!-- Header -->
<div id='header'>
<h1>To Do or Not To Do</h1>
<h2 class='tagline'>(your priorities at a glance)</h2>
</div>
<!-- App Container -->
<div class='container'>
<!-- To Do Section -->
<div class='week'>
<div class='row secondary-background'>
<div class='day square'><h3>MON</h3></div>
<div class='task square'>
<p> Insert some information about your week here :) </p>
</div>
<div class='task square'></div>
<div class='task square'></div>
</div>
<div class='row'>
<div class='day square'><h3>TUE</h3></div>
<div class='task square'></div>
<div class='task square'></div>
<div class='task square'></div>
</div>
<div class='row secondary-background'>
<div class='day square'><h3>WED</h3></div>
<div class='task square'></div>
<div class='task square'></div>
<div class='task square'></div>
</div>
<div class='row'>
<div class='day square'><h3>THU</h3></div>
<div class='task square'></div>
<div class='task square'></div>
<div class='task square'></div>
</div>
<div class='row secondary-background'>
<div class='day square'><h3>FRI</h3></div>
<div class='task square'></div>
<div class='task square'></div>
<div class='task square'></div>
</div>
</div>
<!-- Reminders Section -->
<div class='reminders'>
<h3>Reminders</h3>
</div>
</div>
<!-- Footer -->
<footer>
<span class='tagline'>copyright nottodo.com</span>
</footer>
</body>
</html>