CSS Flexbox Vocabulary Flashcards

Vocabulary-style flashcards covering Flexbox concepts from the lecture notes.

Flexbox

A CSS layout model designed to create flexible, responsive layouts by controlling alignment, spacing, and order of items within a container.

Flex container

An element with display: flex; its direct children become flex items.

Flex items

Direct children of a flex container that participate in the flexible layout.

Main axis

The primary axis along which flex items are laid out; direction is set by flex-direction.

Cross axis

The axis perpendicular to the main axis.

Flex-direction

Property that controls the direction of the main axis; values include row, row-reverse, column, column-reverse.

Row

Default flex-direction value; lays items out horizontally.

Row-reverse

Lays items out horizontally in reverse order.

Column

Lays items out vertically.

Column-reverse

Lays items out vertically in reverse order.

Justify-content

Distributes space along the main axis; values include flex-start, flex-end, center, space-between, space-around, space-evenly.

Align-items

Aligns items along the cross axis; values include flex-start, flex-end, center, baseline, stretch.

Flex-wrap

Controls whether items wrap onto multiple lines; values: nowrap, wrap, wrap-reverse.

Align-content

Aligns wrapped lines; effective only when items wrap; values include flex-start, flex-end, center, space-between, space-around, stretch.

Flex-grow

Determines how much free space a flex item should take relative to other items.

Flex-shrink

Determines how much a flex item should shrink when space is limited.

Flex-basis

The initial main size of a flex item before growing or shrinking.

Flex

Shorthand for flex-grow, flex-shrink, and flex-basis (e.g., flex: 1 1 100px).

Order

Changes the visual order of items without changing their HTML order.

Display: flex

The CSS property that activates the flexbox layout on a container.

Centering with flexbox

To center items, use justify-content and align-items to center the content (justify-content: center; align-items: center).

Responsive navbar

A navigation bar layout that uses justify-content: space-between to evenly space items.

Auto margins

Using margin: auto to absorb remaining space for automatic spacing in flex layouts.

Flexbox animation

Applying transitions to flex properties to create smooth animations (e.g., hover increasing flex-grow with transition).