Scribd
Upload
14 views

CSS Flex-Box

css flex box description

Uploaded by

vishnu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
14 views

CSS Flex-Box

css flex box description

Uploaded by

vishnu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

Flex Container: An element set to display: flex; becomes a flex container.

Flex Items: Children of a flex container become flex items.

Flex Properties:

display: flex; or display: inline-flex; (for inline-level containers).

flex-direction: Determines the main axis direction (row, row-reverse, column, column-
reverse).

flex-wrap: Controls whether items wrap onto new lines (nowrap, wrap, wrap-reverse).

flex-flow: A shorthand property combining flex-direction and flex-wrap.

justify-content: Aligns items along the main axis (flex-start, flex-end, center, space-between,
space-around).

align-items: Aligns items along the cross axis (flex-start, flex-end, center, baseline, stretch).

align-content: Distributes space when there's extra space in the cross axis (flex-start, flex-
end, center, space-between, space-around, stretch).

Flex Item Properties:


order: Controls the order in which items appear (integer value).

flex-grow: Specifies how items grow to fill available space.

flex-shrink: Specifies how items shrink when there's not enough space.

flex-basis: Sets the initial size of an item.

flex: A shorthand property for flex-grow, flex-shrink, and flex-basis.

align-self: Overrides align-items for a single item.

You might also like