Assignments Of Class 15: Flexbox - Part 2
Assignment 1: Understanding justify-content
Task: Create a Flexbox container with multiple items, and experiment with all the values of the justify-content property.
Steps:
1. Create an HTML file with a Flexbox container and multiple items.
2. Apply different values of the justify-content property and observe how the items align.
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Justify Content</title> <style> .container { display: flex; height: 200px; border: 1px solid black; } .item { width: 50px; height: 50px; margin: 5px; background-color: lightblue; } </style></head><body> <div class="container" style="justify-content: flex-start;"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> <div class="container" style="justify-content: center;"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> <div class="container" style="justify-content: space-between;"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> <div class="container" style="justify-content: space-around;"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> <div class="container" style="justify-content: space-evenly;"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div></body></html>Explanation:
flex-start: Aligns items at the start of the container.center: Centers items within the container.space-between: Distributes items with the first and last items at the edges, and equal space between the rest.space-around: Items have equal space before the first and after the last, as well as between each item.space-evenly: Distributes items with equal space between each item, including the edges.
Assignment 2: Using align-items for Vertical Alignment
Task: Use align-items to vertically align items within a Flexbox container.
Steps:
1. Create a container with Flexbox.
2. Apply different values of align-items to see how items align vertically.
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Align Items</title> <style> .container { display: flex; height: 200px; border: 1px solid black; } .item { width: 50px; height: 50px; margin: 5px; background-color: lightgreen; } </style></head><body> <div class="container" style="align-items: flex-start;"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> <div class="container" style="align-items: center;"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> <div class="container" style="align-items: flex-end;"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> <div class="container" style="align-items: stretch;"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div></body></html>Explanation:
flex-start: Aligns items at the start (top) of the container.center: Centers items vertically.flex-end: Aligns items at the end (bottom) of the container.stretch: Stretches items to fill the container's height.
Assignment 3: Flex Items Wrapping with flex-wrap
Task: Apply flex-wrap to allow items to wrap when there is insufficient space.
Steps:
1. Create a Flexbox container with a set number of items.
2. Apply flex-wrap to allow the items to wrap onto new lines.
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Flex Wrap</title> <style> .container { display: flex; flex-wrap: wrap; border: 1px solid black; } .item { width: 100px; height: 100px; margin: 10px; background-color: lightcoral; } </style></head><body> <div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div></body></html>Explanation:
- The items will wrap to the next line once the container is filled. The
flex-wrapproperty allows this behavior.
Assignment 4: Creating a Centered Flex Container
Task: Create a container with three items that are centered both horizontally and vertically using Flexbox.
Steps:
1. Set the container to display: flex.
2. Apply justify-content and align-items to center the items.
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Centered Flexbox</title> <style> .container { display: flex; justify-content: center; align-items: center; height: 100vh; border: 1px solid black; } .item { width: 50px; height: 50px; margin: 5px; background-color: lightblue; } </style></head><body> <div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div></body></html> Explanation:
justify-content: center: Horizontally centers the items.align-items: center: Vertically centers the items.
Assignment 5: Creating a Vertical Flexbox Layout
Task: Create a container with a vertical Flexbox layout and align the items at the center.
Steps:
1. Set the container's display to flex and the flex-direction to column.
2. Center the items using justify-content and align-items.
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vertical Flexbox Layout</title> <style> .container { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; border: 1px solid black; } .item { width: 50px; height: 50px; margin: 5px; background-color: lightgreen; } </style></head><body> <div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div></body></html>Explanation:
flex-direction: column: Arranges the items vertically.justify-content: center: Centers items along the main axis (vertically).align-items: center: Centers items along the cross axis (horizontally).
Assignment 6: Creating a Navbar Using Flexbox
Task: Build a horizontal navigation bar using Flexbox.
Steps:
1. Create a container and use Flexbox to align navigation links horizontally.
2. Apply justify-content to distribute the links evenly.
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Flexbox Navbar</title> <style> nav { display: flex; justify-content: space-around; background-color: #333; padding: 10px; } nav a { color: white; text-decoration: none; padding: 10px 15px; } nav a:hover { background-color: #575757; } </style></head><body> <nav> <a href="#">Home</a> <a href="#">About</a> <a href="#">Services</a> <a href="#">Contact</a> </nav></body></html>Explanation:
justify-content: space-around: Distributes links evenly with equal space around them.
Assignment 7: Creating a Gallery Layout Using Flexbox
Task: Create a responsive gallery layout with Flexbox.
Steps:
1. Use Flexbox to arrange images in a row.
2. Make the gallery responsive by adjusting the width of each image based on screen size.
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Flexbox Gallery</title> <style> .gallery { display: flex; flex-wrap: wrap; gap: 10px; } .gallery img { width: 100%; max-width: 200px; height: auto; } </style></head><body> <div class="gallery"> <img src="https://via.placeholder.com/200" alt="Image 1"> <img src="https://via.placeholder.com/200" alt="Image 2"> <img src="https://via.placeholder.com/200" alt="Image 3"> <img src="https://via.placeholder.com/200" alt="Image 4"> </div></body></html>Explanation:
flex-wrap: wrap: Allows the images to wrap into multiple lines.- Responsive design: Images adjust their size based on the screen width.
Assignment 8: Creating a Card Layout
Task: Build a simple card layout with Flexbox.
Steps:
1. Create a Flexbox container to hold the cards.
2. Apply styling to make each card look like a distinct block.
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Flexbox Cards</title> <style> .card-container { display: flex; justify-content: space-between; flex-wrap: wrap; } .card { width: 30%; padding: 20px; border: 1px solid #ddd; margin-bottom: 20px; background-color: #f9f9f9; } </style></head><body> <div class="card-container"> <div class="card"> <h3>Card 1</h3> <p>This is card number 1.</p> </div> <div class="card"> <h3>Card 2</h3> <p>This is card number 2.</p> </div> <div class="card"> <h3>Card 3</h3> <p>This is card number 3.</p> </div> </div></body></html>Explanation:
justify-content: space-between: Distributes the cards with space between them.flex-wrap: wrap: Cards wrap onto new lines when necessary.
Assignment 9: Building a Footer with Flexbox
Task: Create a footer with three sections: left, center, and right aligned.
Steps:
1. Create a Flexbox container for the footer.
2. Use justify-content to align the sections.
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Flexbox Footer</title> <style> footer { display: flex; justify-content: space-between; padding: 20px; background-color: #333; color: white; } footer div { width: 30%; } </style></head><body> <footer> <div>Left Section</div> <div>Center Section</div> <div>Right Section</div> </footer></body></html>Explanation:
justify-content: space-between: Spaces out the three sections with equal space between them.
Assignment 10: Creating a Responsive Navigation Bar
Task: Create a responsive navbar using Flexbox that stacks the items on smaller screens.
Steps:
1. Create a Flexbox navbar with links.
2. Use media queries to make the navbar items stack on smaller screens.
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Responsive Navbar</title> <style> nav { display: flex; justify-content: space-around; background-color: #333; padding: 10px; } nav a { color: white; text-decoration: none; padding: 10px; } nav a:hover { background-color: #575757; } @media (max-width: 600px) { nav { flex-direction: column; align-items: center; } } </style></head><body> <nav> <a href="#">Home</a> <a href="#">About</a> <a href="#">Services</a> <a href="#">Contact</a> </nav></body></html>Explanation:
- Media query: When the screen width is 600px or smaller, the navbar items stack vertically.
No comments:
Post a Comment