CSS Flex - 13 Properties and its Values (Reference)

https://webdevfix.com/13-fleproperties-and-values-in-css

Tech:

Css

Since:

1 year ago

Views:

The CSS Flexible Box Layout Module is a set of CSS properties that provide a flexible way to position elements in a document.

Flex properties:

flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap

align-content align-items align-self justify-content justify-items justify-self

flex

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

flex: grow shrink basis;
flex: auto;
flex: initial;
flex: inherit;

flex-basis

Specifies the initial length of a flexible item.

flex-basis: number;
flex-basis: auto;
flex-basis: initial;
flex-basis: inherit;

flex-direction

Specifies the direction of the flexible items.

flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;
flex-direction: initial;
flex-direction: inherit;

flex-flow

A shorthand property for the flex-direction and the flex-wrap properties.

flex-flow: flex-direction flex-wrap;
flex-flow: initial;
flex-flow: inherit;

flex-grow

Specifies how much the item will grow relative to the rest.

flex-grow: number;
flex-grow: initial;
flex-grow: inherit;

flex-shrink

Specifies how the item will shrink relative to the rest.

flex-shrink: number;
flex-shrink: initial;
flex-shrink: inherit;

flex-wrap

Specifies whether the flexible items should wrap or not.

flex-wrap: nowrap;
flex-wrap: wrap;
flex-wrap: wrap-reverse;
flex-wrap: initial;
flex-wrap: inherit;

align-content

Specifies the alignment between the lines inside a flexible container when the items do not use all available space.

align-content: stretch;
align-content: center;
align-content: flex-start;
align-content: flex-end;
align-content: space-between;
align-content: space-around;
align-content: initial;
align-content: inherit;

align-items

Specifies the alignment for items inside a flexible container.

align-items: stretch;
align-items: center;
align-items: flex-start;
align-items: flex-end;
align-items: baseline;
align-items: initial;
align-items: inherit;

align-self

Specifies the alignment for selected items inside a flexible container.

align-self: auto;
align-self: stretch;
align-self: center;
align-self: flex-start;
align-self: flex-end;
align-self: baseline;
align-self: initial;
align-self: inherit;

justify-content

Specifies the alignment between the items inside a flexible container when the items do not use all available space.

justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify-content: space-between;
justify-content: space-around;
justify-content: initial;
justify-content: inherit;

justify-items

Defines the default justify-self for all items of the box.

justify-items: stretch;
justify-items: center;
justify-items: flex-start;
justify-items: flex-end;
justify-items: baseline;
justify-items: initial;
justify-items: inherit;

justify-self

This property sets the way a box is justified inside its alignment container along the appropriate axis.

justify-self: auto;
justify-self: stretch;
justify-self: center;
justify-self: flex-start;
justify-self: flex-end;
justify-self: baseline;
justify-self: initial;
justify-self: inherit;

CSS Background - 10 Properties and its Values (Reference)

1 year ago

CSS Font - 11 Properties and its Values (Reference)

1 year ago

CSS Text - 11 Properties and its Values (Reference)

1 year ago

CSS Flex - 13 Properties and its Values (Reference)

1 year ago

CSS Functions - 14 Functions (Reference)

1 year ago