CSS Flexbox

CSS Flexbox (Flexible Box Layout Module) is a powerful layout model that provides a more efficient way to arrange, align, and distribute elements on a web page compared to traditional methods like floats and tables. It simplifies the creation of responsive, adaptive, and visually appealing layouts, particularly for one-dimensional layouts (horizontal or vertical).

Here’s How CSS Flexbox Works:

1. Flex Container:

  • An element with display: flex or display: inline-flex becomes a flex container.
  • It establishes a flexible layout for its immediate child elements, known as flex items.

2. Flex Items:

  • Direct children of a flex container are flex items.
  • They can be arranged and aligned within the flex container using various flex properties.

3. Main Flex Properties:

  • flex-direction: Determines the main axis (row or column) along which flex items are placed.
  • justify-content: Aligns flex items along the main axis (start, end, center, space-between, space-around, space-evenly).
  • align-items: Aligns flex items along the cross axis (start, end, center, stretch, baseline).
  • flex-wrap: Controls whether flex items wrap onto multiple lines when they exceed the container’s width.

4. Additional Properties:

  • flex-grow: Determines how much a flex item can grow relative to others.
  • flex-shrink: Determines how much a flex item can shrink relative to others.
  • flex-basis: Sets the initial size of a flex item before any flex-grow or flex-shrink adjustments.
  • align-self: Overrides the align-items setting for individual flex items.

Common Use Cases:

  • Navigation bars
  • Card layouts
  • Form elements
  • Image galleries
  • Responsive grid systems

Examples of CSS Flexbox with HTML:

1. Simple Flexbox Container:

HTML:

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

CSS:

.flex-container {
  display: flex; /* Enable flexbox for the container */
}

2. Row and Column Directions:

CSS:

.flex-container {
  flex-direction: row;  /* Items align horizontally (default) */
}

.flex-row {
  flex-direction: column; /* Items align vertically */
}

3. Justifying Content:

CSS:

.flex-container {
  justify-content: space-between; /* Distribute space evenly between items */
}

.flex-justify-center {
  justify-content: center; /* Align items to the center */
}

.flex-justify-flex-start {
  justify-content: flex-start; /* Align items to the start */
}

.flex-justify-flex-end {
  justify-content: flex-end; /* Align items to the end */
}

4. Aligning Items:

CSS:

.flex-container {
  align-items: center; /* Align items vertically to the center */
}

.flex-align-flex-start {
  align-items: flex-start; /* Align items to the top */
}

.flex-align-flex-end {
  align-items: flex-end; /* Align items to the bottom */
}

5. Wrapping Items:

CSS:

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

Key Points:

  • Flexbox provides a powerful way to create flexible and responsive layouts.
  • The display: flex property enables flexbox on a container element.
  • Properties like flex-direction, justify-content, align-items, and flex-wrap control the alignment and wrapping of items within the container.
  • It’s widely supported in modern browsers, making it a reliable choice for web layouts.

Benefits of Flexbox:

  • Simpler syntax compared to floats and tables.
  • More flexible and intuitive layout controls.
  • Responsive designs that adapt to different screen sizes.
  • Better handling of content of varying lengths.
< Previous
Next Lesson >