Lecture Notes Of Class 15: Flexbox - Part 2

Lecture Notes Of Class 15: Flexbox - Part 2

Objective:

By the end of this class, students will be able to master key Flexbox properties, such as justify-content, align-items, and flex-wrap, and will apply these properties to build a responsive navigation bar.

Topics:

1.   justify-content

2.   align-items

3.   flex-wrap

---

1. justify-content:

The justify-content property in Flexbox is used to control the alignment of the flex items along the main axis (the direction in which the flex container's items are laid out, which can be horizontal or vertical).

Syntax:

css

justify-content: value;

Possible Values of justify-content:

• flex-start (default): Aligns items at the start of the container (left for row direction, top for column direction).
• flex-end: Aligns items at the end of the container (right for row direction, bottom for column direction).
• center: Centers items in the container.
• space-between: Distributes items evenly, with the first item at the start, the last item at the end, and equal space between the rest.
• space-around: Distributes items evenly with equal space before the first item and after the last item, as well as between each item.
• space-evenly: Distributes items with equal space between them, including the start and end of the container.

Example:

css

.container {

    display: flex;

    justify-content: center;  /* Items will be centered */

}

2. align-items:

The align-items property is used to align flex items along the cross axis, which is perpendicular to the main axis (i.e., vertically when the main axis is horizontal, and horizontally when the main axis is vertical).

Syntax:

css

align-items: value;

Possible Values of align-items:

• flex-start: Aligns items at the start of the container (top for row direction, left for column direction).
• flex-end: Aligns items at the end of the container (bottom for row direction, right for column direction).
• center: Centers items along the cross axis.
• baseline: Aligns items based on their baseline (i.e., text line).
• stretch (default): Stretches items to fill the container along the cross axis.

Example:

css

.container {

    display: flex;

    align-items: center;  /* Items will be centered vertically */

}

3. flex-wrap:

The flex-wrap property controls whether the flex items should wrap onto the next line (if there is not enough space in the container).

Syntax:

css

flex-wrap: value;

Possible Values of flex-wrap:

• nowrap (default): All flex items will be on one line, even if they overflow the container.
• wrap: Flex items will wrap onto the next line if necessary, maintaining their natural order.
• wrap-reverse: Flex items will wrap onto the next line, but in the opposite direction (from bottom to top for row direction, from right to left for column direction).

Example:

css

.container {

    display: flex;

    flex-wrap: wrap;  /* Items will wrap if there is insufficient space */

}

---

Lab Exercise: Build a Responsive Navbar Using Flexbox

Goal: Create a navigation bar that adjusts its layout on different screen sizes.

Step-by-Step Guide:

1.   HTML Structure:
Create the basic structure of the navigation bar using nav, ul, and li elements.

html

<nav>

    <ul>

        <li><a href="#">Home</a></li>

        <li><a href="#">About</a></li>

        <li><a href="#">Services</a></li>

        <li><a href="#">Contact</a></li>

    </ul>

</nav>

2.   CSS Styling:

o    Set up the container:
The nav element will be the flex container. Set it to display: flex and use justify-content and align-items to align the items properly.

css

nav {

    display: flex;

    justify-content: space-between; /* Space between links */

    align-items: center;            /* Vertically center the items */

    background-color: #333;

    padding: 10px 20px;

}

ul {

    list-style-type: none;

    display: flex; /* Make the list items display in a row */

    padding: 0;

    margin: 0;

}

li {

    margin: 0 15px; /* Space between list items */

}

a {

    text-decoration: none;

    color: white;

    font-size: 16px;

}

3.   Make it responsive:

o    Use flex-wrap to ensure the items wrap on smaller screens, and adjust the layout for smaller devices using media queries.

css

@media (max-width: 600px) {

    nav {

        flex-direction: column; /* Stack the items vertically */

        justify-content: center; /* Center the items */

    }

    ul {

        flex-wrap: wrap; /* Allow wrapping */

        justify-content: center; /* Center items when wrapped */

    }

    li {

        margin: 10px 0; /* Space between items when stacked */

    }

}

4.   Testing Responsiveness:
Test the navbar in various screen sizes to ensure the layout is responsive. On wider screens, the items will be spaced out and aligned horizontally. On smaller screens, the items will stack vertically, and the layout will adjust to the screen size.

---

Summary:

In this class, you learned about:

• justify-content to align items along the main axis.
• align-items to align items along the cross axis.
• flex-wrap to allow items to wrap when necessary.

You applied these Flexbox properties by building a responsive navigation bar that adapts to different screen sizes. 

These assignments help you practice various aspects of Flexbox, from basic layout control to advanced responsive design principles. Each solution provides clear, beginner-friendly explanations and visual outcomes.