Scribd
Upload
44 views3 pages

Flex Box

The document defines 8 properties for controlling flexbox layouts: justify-content and align-items control item alignment on the main and cross axes respectively, flex-direction sets the main axis direction, order controls item order, align-self overrides align-items for individual items, flex-wrap controls wrapping, flex-flow is a shorthand for flex-direction and flex-wrap, and align-content controls spacing between wrapped lines.

Uploaded by

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

Flex Box

The document defines 8 properties for controlling flexbox layouts: justify-content and align-items control item alignment on the main and cross axes respectively, flex-direction sets the main axis direction, order controls item order, align-self overrides align-items for individual items, flex-wrap controls wrapping, flex-flow is a shorthand for flex-direction and flex-wrap, and align-content controls spacing between wrapped lines.

Uploaded by

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

FlexBox

1. justify-content - which aligns items (main-axis) horizontally

It accepts the following values:

flex-start: Items align to the left side of the container.

flex-end: Items align to the right side of the container.

center: Items align at the center of the container.

space-between: Items display with equal spacing between them.

space-around: Items display with equal spacing around them.

2. align-items - this CSS property aligns items (cross-axis) vertically and

It accepts the following values:

flex-start: Items align to the top of the container.

flex-end: Items align to the bottom of the container.

center: Items align at the vertical center of the container.

baseline: Items display at the baseline of the container.

stretch: Items are stretched to fit the container.

3. flex-direction - This CSS property defines the direction items are placed in
the container (OR DEFINES DIRECTION OF MAIN AXIS).

It accepts the following values:

row: Items are placed the same as the text direction.

row-reverse: Items are placed opposite to the text direction.

column: Items are placed top to bottom.

column-reverse: Items are placed bottom to top.


NOTE: Notice that when the flex direction is a column, justify-content changes to
the vertical and align-items to the horizontal.

4. order property - we can apply the order property to individual items. By


default, items have a value of 0, but we can use this property to also set it to a
positive or negative integer value (-2, -1, 0, 1, 2).

ex: .yellow {

order:1;}

5. align-self - can apply to individual items is align-self. This property accepts


the same values as align-items and its value for the specific item.

eg: .yellow {

align-self:flex-end;}

6. flex-wrap property - Specifies whether flex items are forced on single line
or can be wrapped on multiple line.

It accepts the following values:

nowrap: Every item is fit to a single line. (default)

wrap: Items wrap around to additional lines.

wrap-reverse: Items wrap around to additional lines in reverse.

7. flex-flow - The two properties flex-direction and flex-wrap are used so often
together that the shorthand property flex-flow was created to combine them. This
shorthand property accepts the value of one of the two properties separated by a
space.

For example, you can use flex-flow: row wrap to set rows and wrap them.
8. align-content - align-content (on cross axis) to set how multiple lines are
spaced apart from each other.

It accepts the following values:

flex-start: Lines are packed at the top of the container.

flex-end: Lines are packed at the bottom of the container.

center: Lines are packed at the vertical center of the container.

space-between: Lines display with equal spacing between them.

space-around: Lines display with equal spacing around them.

stretch: Lines are stretched to fit the container.

This can be confusing, but align-content determines the spacing between lines,
while align-items determines how the items as a whole are aligned within the
container. When there is only one line, align-content has no effect.

You might also like