Display: flex;

creates a block-level flex container

flex-box

Display: flex;

creates an inline-level flex container

flex-box

Note:

container with display: flex/inline-flex convert their child elements automatically into flex items

Flex container properties

allow you to control how items appear within the container

flex-direction: row;

flex-1

flex-2

flex-3

flex-4

flex-5

flex-6

flex-7

flex-direction: row-reverse;

flex-1

flex-2

flex-3

flex-4

flex-5

flex-6

flex-7

flex-direction: column;

flex-1

flex-2

flex-3

flex-4

flex-5

flex-6

flex-7

flex-direction: column-reverse;

flex-1

flex-2

flex-3

flex-4

flex-5

flex-6

flex-7

flex-wrap: wrap;

flex-1

flex-2

flex-3

flex-4

flex-5

flex-6

flex-7

flex-8

flex-9

flex-10

flex-11

flex-12

flex-wrap: wrap-reverse;

flex-1

flex-2

flex-3

flex-4

flex-5

flex-6

flex-7

flex-8

flex-9

flex-10

flex-11

flex-12

flex-wrap: nowrap;

It is a default property.

flex-box

flex-wrap: nowrap;

flex-1

flex-2

flex-3

flex-4

flex-5

flex-6

flex-7

flex-wrap: wrap;

flex-1

flex-2

flex-3

flex-4

flex-5

flex-6

flex-7

flex-wrap: wrap-reverse;

flex-1

flex-2

flex-3

flex-4

flex-5

flex-6

flex-7

flex-flow: column wrap;

shortend form of flex-direction & flex-wrap

flex-1

flex-2

flex-3

flex-4

flex-5

flex-6

flex-7

Flexbox aligment properties

aligment can we urgested with the help of property

justify-content: flex-start | flex-end | center | space-between | space-around

justify-content: flex-start;

flex-box

justify-content: flex-end;

flex-box

justify-content: center;

flex-box

justify-content: space-between;

flex-box

justify-content: space-around;

flex-box

flex-direction: column;

Flexbox aligment properties

aligment can we urgested with the help of property

justify-content: flex-start | flex-end | center | space-between | space-around

justify-content: flex-start;

flex-box

justify-content: flex-end;

flex-box

justify-content: center;

flex-box

justify-content: space-between;

flex-box

justify-content: space-around;

flex-box

Flexbox aligment properties

align-items

properties allow you to arrange items on the cross axis (up & down when direction is row, left & right when direction is column)

align-items: flex-start | flex-end | center | baseline | stretch

align-items: flex-start;

flex-box
flex-box

flex-box

flex-box
flex-box
flex-box

flex-box

flex-box
flex-box
flex-box
flex-box

flex-box

flex-box
flex-box

align-items: flex-end;

flex-box
flex-box

flex-box

flex-box
flex-box
flex-box

flex-box

flex-box
flex-box
flex-box
flex-box

flex-box

flex-box
flex-box

align-items: center;

flex-box
flex-box

flex-box

flex-box
flex-box
flex-box

flex-box

flex-box
flex-box
flex-box
flex-box

flex-box

flex-box
flex-box

align-items: baseline;

flex-box
flex-box

flex-box

flex-box
flex-box
flex-box

flex-box

flex-box
flex-box
flex-box
flex-box

flex-box

flex-box
flex-box

align-items: stretch;

flex-box
flex-box

flex-box

flex-box
flex-box
flex-box

flex-box

flex-box
flex-box
flex-box
flex-box

flex-box

flex-box
flex-box

align-content

align-content property applies only when there are multiple wrapped flex lines

align-content: flex-start | flex-end | center | space-between | space-around | stretch

align-content: flex-start;

flex-1

flex-2

flex-3

flex-4

flex-5

flex-6

flex-7

flex-8

flex-9

flex-10

flex-11

align-content: flex-end;

flex-1

flex-2

flex-3

flex-4

flex-5

flex-6

flex-7

flex-8

flex-9

flex-10

flex-11

align-content: center;

flex-1

flex-2

flex-3

flex-4

flex-5

flex-6

flex-7

flex-8

flex-9

flex-10

flex-11

align-content: space-between;

flex-1

flex-2

flex-3

flex-4

flex-5

flex-6

flex-7

flex-8

flex-9

flex-10

flex-11

align-content: space-around;

flex-1

flex-2

flex-3

flex-4

flex-5

flex-6

flex-7

flex-8

flex-9

flex-10

flex-11

align-content: stretch;

flex-1

flex-2

flex-3

flex-4

flex-5

flex-6

flex-7

flex-8

flex-9

flex-10

flex-11

flex: 1 0 100px;

flex: none | flex-grow flex-shrink flex-basis;

flex item properties determines how space is distributed within items

flex-box

flex: 0 1 auto;

prevents expansion

flex-box

flex: 1 1 auto;

allow expansion

flex-box

flex: 3 1 auto;

allow expansion | manual child selection

flex-box

flex: 0 1 100px;

flex-grow set 0 and flex-shrink set to 1, flex-basis set to 100px

flex-box

order: 1

flex item order used to set their respective order in items. default order value is '0'

flex-1

flex-2

flex-3

flex-4

flex-5

flex-6

flex-7

Display: flex; creates a block-level flex container

Display: flex; creates an inline-level flex container

Note: container with display: flex/inline-flex convert their child elements automatically into flex items

Flex container properties allow you to control how items appear within the container

flex-direction: row;

flex-direction: row-reverse;

flex-direction: column;

flex-direction: column-reverse;

flex-wrap: wrap;

flex-wrap: wrap-reverse;

flex-wrap: nowrap; It is a default property.

flex-wrap: nowrap;

flex-wrap: wrap;

flex-wrap: wrap-reverse;

flex-flow: column wrap; shortend form of flex-direction & flex-wrap

Flexbox aligment properties

justify-content: flex-start;

justify-content: flex-end;

justify-content: center;

justify-content: space-between;

justify-content: space-around;

flex-direction: column;Flexbox aligment properties

justify-content: flex-start;

justify-content: flex-end;

justify-content: center;

justify-content: space-between;

justify-content: space-around;

Flexbox aligment properties

align-items: flex-start;

align-items: flex-end;

align-items: center;

align-items: baseline;

align-items: stretch;

align-content: flex-start;

align-content: flex-end;

align-content: center;

align-content: space-between;

align-content: space-around;

align-content: stretch;

flex: 1 0 100px;flex: none | flex-grow flex-shrink flex-basis; flex item properties determines how space is distributed within items

flex: 0 1 auto; prevents expansion

flex: 1 1 auto; allow expansion

flex: 3 1 auto; allow expansion | manual child selection

flex: 0 1 100px; flex-grow set 0 and flex-shrink set to 1, flex-basis set to 100px

order: 1 flex item order used to set their respective order in items. default order value is '0'

Display: flex;
creates a block-level flex container

Display: flex;
creates an inline-level flex container

Note:
container with display: flex/inline-flex convert their child elements automatically into flex items

Flex container properties
allow you to control how items appear within the container

flex-wrap: nowrap;
It is a default property.

flex-flow: column wrap;
shortend form of flex-direction & flex-wrap

flex-direction: column;
Flexbox aligment properties

flex: 1 0 100px;
flex: none | flex-grow flex-shrink flex-basis;
flex item properties determines how space is distributed within items

flex: 0 1 auto;
prevents expansion

flex: 1 1 auto;
allow expansion

flex: 3 1 auto;
allow expansion | manual child selection

flex: 0 1 100px;
flex-grow set 0 and flex-shrink set to 1, flex-basis set to 100px

order: 1
flex item order used to set their respective order in items. default order value is '0'