Lecture Notes Of Class 14: Flexbox - Part 1

Lecture Notes Of Class 14: Flexbox - Part 1

Objective:

In this class, we will introduce the Flexbox layout, a powerful tool for creating flexible and responsive web layouts. We will understand the concept of a flex container and flex items, and explore the basic display: flex property that turns an element into a flex container.

---

Topics:

1. Flexbox Layout:

Flexbox (Flexible Box Layout) is a CSS layout model that allows you to create complex layouts with ease. It provides more control over spacing, alignment, and distribution of elements within a container. Unlike traditional layouts (like block or inline), Flexbox makes it simple to align elements horizontally or vertically.

The main concept in Flexbox is the flex container and flex items.

2. Flex Container and Flex Items:

• Flex Container:
• The flex container is the element that holds the items that you want to arrange using Flexbox. It is defined by setting the display property to flex or inline-flex.
• By default, Flexbox arranges its items in a row (horizontally), but you can change the direction to a column (vertically) or any other custom layout using Flexbox properties.
• Flex Items:
• The flex items are the child elements inside the flex container. These are the elements that will be arranged by the Flexbox model.
• Each item can be styled individually using Flexbox properties like flex-grow, flex-shrink, and flex-basis to control their size and spacing.

3. display: flex:

To create a flex container, you use the CSS property display: flex on the parent element. This enables the Flexbox model for the container and automatically arranges its children (flex items) using the default behavior (row direction).

css

.container {

  display: flex;

}

By using display: flex, the parent container becomes a flex container, and the child elements inside this container automatically become flex items.

Key Points:

• When you set display: flex, the children (flex items) will automatically align in a row.
• If you want to change the layout to a column (vertical direction), you can set the flex-direction property to column.

---

Detailed Breakdown of Flexbox Properties:

• flex-direction:
• This property defines the direction of the flex container's main axis (the direction in which the flex items will be arranged).
• Values:
• row: (default) Aligns items in a row (horizontal).
• column: Aligns items in a column (vertical).
• row-reverse: Reverses the row direction.
• column-reverse: Reverses the column direction.

css

.container {

  display: flex;

  flex-direction: row; /* Aligns items in a row */

}

• justify-content:
• Aligns the items along the main axis (horizontally when the flex-direction is row, vertically when it's column).
• Values:
• flex-start: Items are aligned at the start of the container.
• flex-end: Items are aligned at the end of the container.
• center: Items are aligned at the center.
• space-between: Items are spaced evenly, with the first item at the start and the last item at the end.
• space-around: Items are spaced evenly with equal space around them.

css

.container {

  display: flex;

  justify-content: center; /* Align items in the center horizontally */

}

• align-items:
• Aligns the items along the cross axis (perpendicular to the main axis).
• Values:
• stretch: Items stretch to fill the container (default).
• flex-start: Aligns items to the start of the container.
• flex-end: Aligns items to the end of the container.
• center: Aligns items at the center of the container.
• baseline: Aligns items along their baseline.

css

.container {

  display: flex;

  align-items: center; /* Align items vertically in the center */

}

• align-self:
• This property allows individual flex items to override the align-items value and align differently within the container.

css

.item {

  align-self: flex-start; /* Align a specific item to the start */

}

---

Lab Exercise: Create a Basic Flex Layout with Rows and Columns

Objective:

To practice the concepts learned about Flexbox, you will create a basic layout using both rows and columns.

Steps:

1.   Create a basic 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 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 container using Flexbox: In the CSS file (styles.css), set the container to be a flex container using display: flex.

css

.container {

  display: flex;

  justify-content: space-between; /* Distribute items evenly */

  align-items: center; /* Align items vertically at 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; /* Make each item take up equal space */

  margin: 10px;

}

3.   View the Result:

o    This will create a basic layout with four items arranged in a row, with equal space between them. All items are vertically centered in the container.

o    Experiment with different values of justify-content (e.g., center, space-between, flex-start) to see the effect on item distribution.

4.   Modify the Layout to Use Columns:

o    Change the layout to a column by setting flex-direction: column.

css

.container {

  display: flex;

  flex-direction: column; /* Items will be arranged in a column */

  justify-content: center;

  align-items: center;

  height: 100vh;

}

---

Conclusion:

In this class, you have learned how to use Flexbox to create flexible and responsive layouts. By using display: flex, you turned a container into a flex container, and by using various Flexbox properties like justify-content, align-items, and flex-direction, you can control the alignment, distribution, and direction of the flex items.