CSS Flexbox Lecture Notes

Introduction to Flexbox

• Flexbox is a powerful layout model in CSS that helps create responsive layouts.
• Understanding Flexbox will enhance your CSS skills and confidence in solving layout problems.

Key Concepts

Display Property

• Use display: flex; to initiate a Flexbox layout.
• Changes the positioning of elements from block (vertically stacked) to flex (side by side).

Axes in Flexbox

• Main Axis: Direction in which flex items are laid out (default: row, left to right).
• Cross Axis: Perpendicular to the main axis (default: column, top to bottom).

Justifying Content

• justify-content property controls alignment along the main axis:
  • flex-start: Align items to the start (left side).
  • flex-end: Align items to the end (right side).
  • center: Center items along the main axis.
  • space-between: Space between items, first and last touch container edges.
  • space-around: Equal space around items, first and last don’t touch edges.
  • space-evenly: Equal space between all items.

Aligning Items Vertically

• align-items property controls alignment along the cross axis:
  • flex-start: Align items to the top.
  • flex-end: Align items to the bottom.
  • center: Center items vertically.

Flexbox Properties

Flex Direction

• flex-direction property changes the direction of the main axis:
  • row: Default, left to right.
  • row-reverse: Right to left.
  • column: Top to bottom.
  • column-reverse: Bottom to top.

Gap Property

• gap property adds spacing between flex items:
  • Example: gap: 20px;

Flex Wrap

• flex-wrap allows for wrapping of flex items:
  • wrap: Allows items to wrap onto the next line.
  • nowrap: Prevents wrapping, items shrink together.

Aligning Multiple Lines

• align-content controls alignment of wrapped lines:
  • space-between, space-around, flex-start, flex-end, center.

Responsive Layouts with Flexbox

• Use flex-grow and flex-shrink properties to control how items grow or shrink:
  • flex-grow: Allows items to grow to fill available space.
  • flex-shrink: Allows items to shrink when necessary.
• Assigning different grow/shrink values can create complex responsive designs.
• Use min-width or max-width to control item sizes further.

Align Self Property

• align-self overrides the align-items property for individual flex items:
  • Example: align-self: flex-end; for one item while others follow the general rule.

Summary of Key Takeaways

• Use Flexbox properties to control layouts effectively:
  • Position items using justify-content and align-items.
  • Wrap items with flex-wrap
  • Resize items with flex-grow and flex-shrink.
  • Combine with media queries for responsive designs.

Transition to CSS Grid

• CSS Grid may simplify complex layouts with fewer lines of code.
• Example: Centering a div in Grid uses display: grid; place-content: center; instead of multiple Flexbox lines.

---

End of Notes

• For further learning, consider the complete HTML and CSS course linked in the video description.