tutorialstonight logo
A Platform To Learn To Code

CSS FLEXBOX



BOX

CSS flexbox is a web layout method to for HTML containers. Its allow the responsive elements to get automatically arranged depending on screen sizes.

The main idea behind CSS flexbox is to give the container to change its item's size automatically to best fit in available space.

Before CSS flexbox the items were mostly layed out using float and position properties. Even though using using just float and position properties we were unable to perform many tasks like, aligning items vertically, making child element take up equal space even with unequal lenght of items.



How to use flexbox

CSS flexbox is not a property its a module ( a W3C recomendation as of oct 2017) and to use all the functionalities of flexbox we first need to define flexbox in our parent element so that other properties of flexbox could be used by parent as well as child element.

To start using flexbox define display: flex or display: inline-flex

  • display: flex makes itself behave like block element
  • display: inline-flex makes itself behave like inline element

Example

Run the code

Output:

1

2

3

4

5



Now as you know how to create a flexbox, let's learn now about its different properties.

CSS flexbox has following properties:

  1. flex-direction
  2. flex-wrap
  3. align-items
  4. align-contents
  5. justify-content



1.) flex-direction

Flexbox module provide a property called flex-direction which specify what direction the children are laid out in.

flex-direction has four different value row, row-reverse, column and column-reverse.

  1. row : It aligns flexbox items from left to right. It is default value of flex-direction.
  2. row-reverse : It aligns flexbox items from right end of the container to left end.
  3. column : It aligns flexbox items from top to bottom in the flexbox container.
  4. column-reverse : It aligns flexbox items from bottom to top in the flexbox or container.

Let's see examples :

I. flex direction row

Example

Run the code

Output:

1

2

3

4

5


II. flex direction row reverse

Example

Run the code

Output:

1

2

3

4

5


III. flex direction column

Example

Run the code

Output:

1

2

3


IV. flex direction column reverse

Example

Run the code

Output:

1

2

3



2.) flex-wrap

flex-wrap property is used to define whether the flex items are aligned in single row or the items can flow to multiple rows.

flex-wrap property set values of wrapping wrapping items. There are three values that could be set for flex-wrap property nowrap,wrap and wrap-reverse.

  1. nowrap: It force flex items to be in same row. Its is default value for flex-wrap.
  2. wrap: It let flex items to flow to next row if there is no space to fit in same row..
  3. wrap-reverse: It specifies that flex items can flow to multiple rows but items will start from bottom of flexbox and after fill that it will flow to upper row.

Let's see examples.

I. flex-wrap nowrap ( default )

Example

Run the code

Output:

flex item stays in same row and overflown the container.

1

2

3

4

5

6

7

8

9

10


II. flex-wrap wrap

Example

Run the code

Output:

flex items flows to new row.

1

2

3

4

5

6

7

8

9

10


III. flex-wrap wrap-reverse

Example

Run the code

Output:

flex item starting from bottom and flowing to new row in upward direction.

1

2

3

4

5

6

7

8

9

10



3.) align-items property

The align-items property flex items how it will stay along Y-axis also called cross axis in flexbox.

The align-items property has five different values flex-start, flex-end, center, baseline and strtech.

  1. flex-start - It align flex items to the top of container.
  2. flex-end - It align flex items to the bottom of container.
  3. center - It align flex items in the center of container.
  4. baseline - It align flex items in such a way that their baseline aligns.
  5. stretch - It stretch the flex items along container. It is default value.

Let's see examples.

I. align-items flex-start

Example

Run the code

Output:

flex item aligned to flex-start which forces flex-items to start from top.

1

2

3

4

5

6

7

8

9

10


II. align-items flex-end

Example

Run the code

Output:

flex item aligned to flex-end which forces flex-items to start from bottom.

1

2

3

4

5

6

7

8

9

10


III. align-items center

Example

Run the code

Output:

flex item aligned to center flex-items in the center along Y-axis.

1

2

3

4

5

6

7

8

9

10


IV. align-items baseline

Example

Run the code

Output:

flex item aligned aligned along their baseline.

1

2

3

4

5

6

7

8

9

10


V. align-items stretch

Example

Run the code

Output:

flex items get stretched along Y-axis and cover 100% height unless min or max value is defined.

1

2

3

4

5

6

7

8

9

10



4.) align-contents property

The align-contents is multiline property, it works the same as align-items along cross axis ( Y-axis ) but instead of aligning flex items it aligns flex container's line as a whole. Its effect is not visible when there is only one row in the flexbox.

The align-contents property has six different values flex-start, flex-end, center, space-around, space-between and stretch.

  1. flex-start: Aligns items to the start of the container.
  2. flex-end: Aligns items to the end of the container.
  3. center: Aligns items to the center of the container.
  4. space-around: Aligns items equally distributed along each row.
  5. space-between: Aligns items between start and end of the container. First row starts from top and the last row touches bottom.
  6. stretch: Aligns items stretched along the cross axis of the container.

Let's see examples.

I. align-content flex-start

Example

Run the code

Output:

flex rows aligned to flex-start which forces flex-items to start from top.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20


II. align-content flex-end

Example

Run the code

Output:

flex rows aligned to flex-end which forces flex-items to start from bottom.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20


III. align-content center

Example

Run the code

Output:

flex rows align to the center of the container.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20


IV. align-content space-around

Example

Run the code

Output:

flex lines aligned evenly in the container.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20


V. align-content space-between

Example

Run the code

Output:

flex rows aligned in space between the container first row touching top and last row touching bottom.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20


VI. align-content stretch

Example

Run the code

Output:

flex rows items are stretched along the cross axis.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20



5.) justify-content property

The justify-content property aligns flex items along the main axis ( X-axis ). All flex line's items align horizontally according to justify-content value.

The justify-content property has six values flex-start, flex-end, center, space-around, space-evenly and space-between.

  1. flex-start: Aligns items horizontally to the start of the container.
  2. flex-end: Aligns items horizontally to the end of the container.
  3. center: Aligns items horizontally to the center of the container.
  4. space-around: Aligns items horizontally equally distributed.
  5. space-evenly: Items are so aligned that space between container and item is the same as space between items.
  6. space-between: Aligns items horizontally between start and end of the container. First row starts from left and the last row touches right.

Let's see examples.

I. justify-content flex-start

Example

Run the code

Output:

Aligns items horizontally to the start of the container.

1

2

3

4

5

6


II. justify-content flex-end

Example

Run the code

Output:

Aligns items horizontally to the end of the container.

1

2

3

4

5

6


III. justify-content center

Example

Run the code

Output:

Aligns items to the horizontal center of the container.

1

2

3

4

5

6


IV. justify-content space-around

Example

Run the code

Output:

Aligns items horizontally equally distributed.

1

2

3

4

5

6



V. justify-content space-evenly

Example

Run the code

Output:

Items are so aligned that space between container and item is the same as space between items.

1

2

3

4

5

6

VI. justify-content space-between

Example

Run the code

Output:

Aligns items horizontally between start and end of the container. First row starts from left and the last row touches right.

1

2

3

4

5

6




BOX

BOX