Science Knowings: CSS Course For Social Media

CSS Flexbox Layout

From CSS Layout Techniques to Flexbox

Welcome back! Today, we'll shift our focus to CSS Flexbox Layout, a powerful tool for creating flexible and responsive layouts.

What is Flexbox?

Flexbox is a CSS layout module that allows you to easily create flexible and responsive layouts using a one-dimensional axis (either row or column).

Flexbox Terminology

Key Terms:

  • Flex Container: The parent element that contains the flex items.
  • Flex Item: Each child element within the flex container.
  • Main Axis: The primary direction of the layout (row or column).
  • Cross Axis: The perpendicular direction to the main axis.

Flexbox Container Properties

Container Properties:

  • flex-direction: Sets the main axis direction (row, column, row-reverse, column-reverse).
  • justify-content: Aligns items along the main axis.
  • align-items: Aligns items along the cross axis.
  • align-content: Aligns lines of items when there's extra space along the cross axis.

justify-content

justify-content Values:
  • flex-start: Aligns items at the start of the container.
  • flex-end: Aligns items at the end of the container.
  • center: Centers items within the container.
  • space-around: Distributes items evenly, with space between.
  • space-between: Distributes items evenly, with no space between.

align-items

align-items Values:
  • flex-start: Aligns items at the start of the cross axis.
  • flex-end: Aligns items at the end of the cross axis.
  • center: Centers items within the cross axis.
  • baseline: Aligns items based on their baselines (text alignment).
  • stretch: Stretches items to fill the cross axis.

align-content

align-content Values:
  • flex-start: Aligns lines at the start of the cross axis.
  • flex-end: Aligns lines at the end of the cross axis.
  • center: Centers lines within the cross axis.
  • space-around: Distributes lines evenly, with space between.
  • space-between: Distributes lines evenly, with no space between.

order

order Property:
  • Sets the display order of flex items (overriding the source order).
  • Values: Positive or negative integers (e.g., 1, -2).

Flexbox Item Properties

Item Properties:

  • flex-grow: Controls how an item grows relative to others.
  • flex-shrink: Controls how an item shrinks relative to others.
  • flex-basis: Sets the initial size of an item.
  • flex: A shorthand for flex-grow, flex-shrink, and flex-basis.

flex-grow

flex-grow Values:
  • Positive number: Specifies how much an item should grow relative to others.
  • 0: Item will not grow.

flex-shrink

flex-shrink Values:
  • Positive number: Specifies how much an item should shrink relative to others.
  • 0: Item will not shrink.

flex-basis

flex-basis Values:
  • Length (e.g., 100px): Sets the initial size of an item.
  • Percentage (%): Sets the initial size relative to the flex container.
  • Auto: Item's initial size is based on its content.

flex

flex Shorthand:
  • flex: ;
  • Values can be omitted (e.g., flex: 1).

Nesting Flexbox Layouts

You can nest flexbox layouts within each other to create complex and flexible layouts.

Flexbox Troubleshooting

Common issues and their solutions:

  • Items not aligning properly: Check align-items and align-content for proper values.
  • Items not resizing properly: Adjust flex properties (flex-grow, flex-shrink, flex-basis).
  • Overlapping items: Ensure overflow is set to hidden if you want to contain items within the container.

Onto CSS Grid Layout

In our next session, we'll delve into CSS Grid Layout, which provides even more powerful and precise control over website layouts. Follow us for more exciting learning!