Wednesday, 19 February 2025

Home / Assignments / Assignments Of Class 14: Flexbox - Part 1

Assignments Of Class 14: Flexbox - Part 1

by on in

 


Assignments Of Class 14: Flexbox - Part 1

Assignment 1: Basic Flex Layout with Row Direction

Objective:

Create a basic Flexbox layout where four items are arranged in a row with equal spacing between them.

Steps:

1.   Create the HTML structure:

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox Row Layout</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
  </div>
</body>
</html>

2.   Style the layout using Flexbox:

css
.container {
  display: flex;
  justify-content: space-between; /* Distribute items evenly */
  align-items: center; /* Align items vertically in the center */
  height: 100vh; /* Full height of the viewport */
  background-color: #f0f0f0;
}
 
.item {
  background-color: #4CAF50;
  color: white;
  padding: 20px;
  border-radius: 5px;
  text-align: center;
  flex: 1; /* Items take equal space */
  margin: 10px;
}

Explanation:

  • display: flex creates a flex container, and by default, the items are arranged in a row.
  • justify-content: space-between evenly distributes the space between the items.
  • align-items: center vertically centers the items within the container.

Assignment 2: Align Items Vertically in a Column Layout

Objective:

Change the layout to a column, where items are arranged vertically and centered.

Steps:

1.   Modify the CSS for column layout:

css
.container {
  display: flex;
  flex-direction: column; /* Arrange items in a column */
  justify-content: center; /* Center items vertically */
  align-items: center; /* Center items horizontally */
  height: 100vh;
  background-color: #f0f0f0;
}
 
.item {
  background-color: #4CAF50;
  color: white;
  padding: 20px;
  border-radius: 5px;
  text-align: center;
  margin: 10px;
}

Explanation:

  • flex-direction: column arranges the items vertically.
  • justify-content: center centers the items along the vertical axis.
  • align-items: center centers the items horizontally.

Assignment 3: Use justify-content to Align Items in a Row

Objective:

Experiment with justify-content to align items at the start, center, or end of the container.

Steps:

1.   Modify the CSS for different justify-content values:

css
.container {
  display: flex;
  justify-content: center; /* Align items in the center */
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
}

2.   Experiment with different values of justify-content:

o    justify-content: flex-start; aligns items at the start of the container.

o    justify-content: flex-end; aligns items at the end.

o    justify-content: space-between; distributes items evenly with the first item at the start and the last item at the end.

Assignment 4: Align Items in a Row with Space Between

Objective:

Distribute items evenly in a row, with the first item at the start and the last item at the end.

Steps:

1.   Modify the CSS to use justify-content: space-between:

css
.container {
  display: flex;
  justify-content: space-between; /* Space between items */
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
}

Explanation:

  • justify-content: space-between places the items at the start and end, with equal space between them.

Assignment 5: Use align-items to Align Items Vertically in a Row

Objective:

Experiment with the align-items property to align items vertically in a row layout.

Steps:

1.   Modify the CSS to align items using align-items:

css
.container {
  display: flex;
  justify-content: space-around;
  align-items: flex-start; /* Align items at the top of the container */
  height: 100vh;
  background-color: #f0f0f0;
}

2.   Try different align-items values:

o    align-items: flex-start; aligns items at the top.

o    align-items: flex-end; aligns items at the bottom.

o    align-items: center; aligns items in the center vertically.

Assignment 6: Change Layout Direction Using flex-direction

Objective:

Change the direction of the layout from row to column.

Steps:

1.   Modify the CSS to use flex-direction: column:

css
.container {
  display: flex;
  flex-direction: column; /* Arrange items in a column */
  justify-content: space-between;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
}

Explanation:

  • flex-direction: column will change the arrangement of items from a horizontal row to a vertical column.

Assignment 7: Use flex-grow to Control Item Growth

Objective:

Use flex-grow to make items expand to fill the available space.

Steps:

1.   Modify the CSS for flex-grow:

css
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
}
 
.item {
  background-color: #4CAF50;
  color: white;
  padding: 20px;
  text-align: center;
  flex-grow: 1; /* Allow items to grow and fill available space */
  margin: 10px;
}

Explanation:

  • flex-grow: 1 allows items to grow and take up the remaining space equally.

Assignment 8: Use align-self to Override Vertical Alignment for Specific Item

Objective:

Use align-self to align a specific item differently from the rest of the items.

Steps:

1.   Modify the CSS for align-self:

css
.container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
}
 
.item {
  background-color: #4CAF50;
  color: white;
  padding: 20px;
  text-align: center;
  margin: 10px;
}
 
.item:nth-child(2) {
  align-self: flex-start; /* Align second item to the top */
}

Explanation:

  • align-self allows an individual item to have a different vertical alignment compared to the rest of the items.

Assignment 9: Create a Flex Layout with Responsive Design

Objective:

Create a responsive layout using Flexbox where the items stack in a column on small screens and align in a row on larger screens.

Steps:

1.   Modify the CSS to use media queries:

css
.container {
  display: flex;
  flex-wrap: wrap; /* Allow items to wrap */
  justify-content: space-between;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
}
 
.item {
  background-color: #4CAF50;
  color: white;
  padding: 20px;
  text-align: center;
  margin: 10px;
  flex: 1;
}
 
@media (max-width: 600px) {
  .container {
    flex-direction: column; /* Stack items in a column on small screens */
  }
}

Explanation:

  • flex-wrap: wrap allows items to wrap if they do not fit in the container.
  • Media queries are used to change the direction of the items on smaller screens.

Assignment 10: Create a Nested Flex Layout

Objective:

Create a nested Flexbox layout where a flex container contains other flex containers as items.

Steps:

1.   Create a nested flex layout in HTML:

html
<div class="container">
  <div class="item">
    <div class="sub-container">
      <div class="sub-item">Sub Item 1</div>
      <div class="sub-item">Sub Item 2</div>
    </div>
  </div>
  <div class="item">Item 2</div>
</div>

2.   Style the nested layout:

css
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
}
 
.item {
  background-color: #4CAF50;
  color: white;
  padding: 20px;
  text-align: center;
  margin: 10px;
}
 
.sub-container {
  display: flex;
  flex-direction: column;
}
 
.sub-item {
  background-color: #FF6347;
  color: white;
  padding: 10px;
  margin: 5px;
}

Explanation:

  • A nested flex container (sub-container) is used inside an item to create a column layout within a row layout.
By at
Tags

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Search This Blog
Powered by Blogger.