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.