Getting Started With CSS Flexbox

Objectives:

• Understand the core principles of CSS Flexbox.
• Learn to create flexible, responsive layouts using Flexbox.
• Master key Flexbox properties for both containers and items.
• Apply practical examples to achieve various layout designs.

1. Introduction to Flexbox

• What is Flexbox?

  • Flexbox is a CSS layout module designed to create responsive and flexible layouts efficiently.
  • It allows easy alignment, distribution, and resizing of elements within a container.
  • Provides more control over how space is allocated between items and how items are aligned.

• Use Cases:

  • Creating layouts that automatically adjust to different screen sizes.
  • Aligning items both horizontally and vertically within a container.
  • Responsive design without the need for complex media queries.

---

2. Flexbox Terminology

Before diving into Flexbox properties, it's essential to understand the core terminologies.

• Flex Container: The parent element that holds flex items and defines the flex context.
• Flex Items: The child elements inside the flex container.

Key Axes:

• Main Axis: The primary axis along which flex items are laid out. It’s determined by the flex-direction property.
• Cross Axis: The perpendicular axis to the main axis.

---

3. Setting Up a Flex Container

To start using Flexbox, set a container to display: flex;.

Example:

.container {
  display: flex;
  width: 100%;
  height: 300px;
  background-color: lightgray;
}

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

Now that the container is a flexbox container, the child elements (items) become flex items and can be manipulated using Flexbox properties.

---

4. Flexbox Container Properties

The following properties are applied to the flex container to control the layout of its children:

1. flex-direction
   • Defines the direction of the main axis (the direction in which flex items are laid out).
   • Values:
     • row (default): Items are laid out horizontally (left to right).
     • row-reverse: Items are laid out horizontally (right to left).
     • column: Items are laid out vertically (top to bottom).
     • column-reverse: Items are laid out vertically (bottom to top).

Example:

   .container {
     display: flex;
     flex-direction: row; /* Change to column for vertical layout */
   }

1. justify-content
   • Aligns flex items along the main axis.
   • Values:
     • flex-start: Items are aligned to the start of the main axis.
     • flex-end: Items are aligned to the end of the main axis.
     • center: Items are centered along the main axis.
     • space-between: Items are evenly spaced with no space at the start or end.
     • space-around: Items are evenly spaced with equal space around them.

Example:

   .container {
     display: flex;
     justify-content: center; /* Align items in the center */
   }

1. align-items
   • Aligns flex items along the cross axis.
   • Values:
     • stretch (default): Items stretch to fill the container.
     • flex-start: Items are aligned at the start of the cross axis.
     • flex-end: Items are aligned at the end of the cross axis.
     • center: Items are aligned in the center of the cross axis.
     • baseline: Items are aligned along their text baselines.

Example:

   .container {
     display: flex;
     align-items: center; /* Center items along the cross axis */
   }

1. flex-wrap
   • Controls whether items are forced onto one line or can wrap onto multiple lines.
   • Values:
     • nowrap (default): All items are placed on one line.
     • wrap: Items wrap onto multiple lines, if necessary.
     • wrap-reverse: Items wrap onto multiple lines in reverse order.

Example:

   .container {
     display: flex;
     flex-wrap: wrap; /* Allow items to wrap onto new lines */
   }

---

5. Flexbox Item Properties

The following properties are applied to the flex items to control their size, order, and alignment within the container.

1. flex-grow
   • Specifies how much a flex item should grow relative to the rest of the items.
   • Default is 0 (no growth). A value of 1 allows the item to grow to fill the space.

Example:

   .item {
     flex-grow: 1; /* Item grows to fill available space */
   }

1. flex-shrink
   • Specifies how much a flex item should shrink relative to the rest of the items when there’s not enough space.
   • Default is 1. A value of 0 prevents the item from shrinking.

Example:

   .item {
     flex-shrink: 0; /* Prevent item from shrinking */
   }

1. flex-basis
   • Specifies the initial size of a flex item before any growing or shrinking occurs.
   • Can be set in percentages, pixels, or any other CSS units.

Example:

   .item {
     flex-basis: 200px; /* Item starts with 200px width */
   }

1. order
   • Changes the visual order of flex items without changing the HTML source order.
   • Default is 0, and the higher the value, the later the item appears.

Example:

   .item {
     order: 2; /* Change the order of this item */
   }

1. align-self
   • Allows individual flex items to override the align-items property set on the container.
   • Values:
     • auto (default): Inherits from the container’s align-items.
     • flex-start, flex-end, center, baseline, stretch.

Example:

   .item {
     align-self: flex-start; /* Align this item to the start of the cross axis */
   }

---

6. Practical Examples of Flexbox Layouts

1. Horizontal Navigation Bar:

   .navbar {
     display: flex;
     justify-content: space-between;
     align-items: center;
   }

   <div class="navbar">
     <div>Logo</div>
     <div>Links</div>
   </div>

1. Two-Column Layout:

   .container {
     display: flex;
   }

   .sidebar {
     flex-basis: 30%;
   }

   .content {
     flex-grow: 1;
   }

   <div class="container">
     <div class="sidebar">Sidebar</div>
     <div class="content">Main Content</div>
   </div>

1. Centered Content:

   .container {
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100vh;
   }

   <div class="container">
     <div class="content">Centered Content</div>
   </div>

---

Conclusion

• Recap: Flexbox simplifies the process of aligning and distributing elements within a container, making responsive design easier.