RETURN HOME

Parent Container Properties:

display

This creates a flex container. Element under the container will turn into flex items. 

      .container {
        display: flex; 
      }

flex direction

row

1
2
3
4
5

row-reverse

1
2
3
4
5

column

1
2
3
4
5

column-reverse

1
2
3
4
5

Flex direction defines the axis in which the container should stack the flex items. 

      .container {
        display: flex;
        flex-direction: row | row-reverse | 
                column | column-reverse;
      }
row (default value): Stacks the flex items in the horizontal direction from left to right.
row-reverse: Stacks the flex items in the horizontal direction from right to left.
column: Stacks the flex items in the vertical direction from top to bottom.
column-reverse: Stacks the flex items in the vertical direction from bottom to top.

justify-content

The justify-content property aligns the flex items along the main axis.

For flex items in a row: The justify-content property will align the items in the horizontal direction.
For flex items in a column: The justify-content property will align the items in the vertical direction.

flex-start

1
2
3

flex-end

4
5
6

center

1
2
3

space-between

1
2
3

space-around

1
2
3

space-evenly

1
2
3
      .container {
        display: flex;
        justify-content: flex-start | flex-end | center |
            space-between | space-around | space-evenly;
      }
flex-start (default value): The flex items are stacked at the beginning of flex container.
flex-end: The flex items are stacked at the end of flex container.
center: The flex items are stacked at the center of the flex container.
space-between: Flex items are even space between them in a line.
space-around: Flex items are equal space around them on the axis.
space-evenly: Items are spread so the spacing between any two adjacent items are equal.

align-items

The align-items property aligns the flex items along the cross axis.

For flex items in a row: The align-items property will align items in vertical direction from top to bottom.
For flex items in a column: The align-items property will align items in horizontal direction from left to right.

flex-start

flex-end

center

stretch (default)

baseline

All the text will line up
1

2

3

4

      .container {
        display: flex;
        align-items: stretch | flex-start |
            flex-end | center | baseline;
      }
stretch (default value): The flex items are stretched to fill up the container.
flex-start: The flex items are stacked at the top of flex container.
flex-end: The flex items are stacked at the bottom of flex container.
center: Flex items are stacked at the middle(top to bottom)of the flex container.
baseline:Flex items are aligned such that individual baselines align at the same level. The baselines are calculated by considering the size of the content inside the container. In the above example, the baseline is taken with respect to the text in individual items.

flex-wrap

1
2
3
4
5
6
7

Default behaviour of flexbox tries to fit the flex items well within a single line. The flex-wrap property enables us to wrap the items into the next row or column.

For flex items in a row: The items will wrap down next row.
For flex items in a column: The items will wrap over to next column.
      .container {
        display: flex;
        flex-wrap: nowrap (default) | wrap | wrap-reverse;
      }
nowrap (default): nowrap value specifies the flex items not to wrap.
wrap: wrap value specifies the flex items to wrap if required.
wrap-reverse: wrap-reverse specifies the flex items to wrap in reverse order.

flex-flow

This property is a shorthand for flex-direction property and the flex-wrap property.

      .container {
        display: flex;
        flex-flow: row wrap;
      }

align-content

The align-content property is similar to the align-items property, but this aligns flex lines instead of flex items across the cross axis. This works only when there are multiple lines of flex items.

flex-start

1
2
3
4
5
6
7
8

flex-end

1
2
3
4
5
6
7
8

center

1
2
3
4
5
6
7
8

stretch

1
2
3
4
5
6
7
8

space-between

1
2
3
4
5
6
7
8

space-around

1
2
3
4
5
6
7
8
      .container {
        display: flex;
        align-content: flex-start | flex-end | center |
            stretch | space-between | space-around;
      }
flex-start: Lines of flex items are stacked at start of flex container.
flex-end: Lines of flex items are stacked at the end of flex container.
center: Lines of items are stacked at the middle(top-bottom)of flex container.
stretch: Lines of items are stretched to fill up the container.
space-between:Lines of items are arranged with equal space between the lines.
space-around:Lines of items are arranged with half space on either ends of container.
space-evenly:Lines of items are arranged in container with equal space around them.

Perfect Centering of Elements

This trick can solve the most common problem faced by developers.

Centering

Centered

        .container {
          display: flex;
          height: 100px;
          justify-content: center;
          align-items: center;
        }


Child Properties

order

1
2
3
4

      <div class="flex-container">
          <div style="order:1">1</div>
          <div style="order:2">2</div>
          <div style="order:3">3</div>
          <div style="order:0">4</div>
      </div>

The order property defines the order in which the flex items are to be arranged. By default, flex items will be arranged in the source order. The initial value of order is "0" - zero.


flex-grow

row-1

1
2
3

row-2

1
2
3

      <div class="row-1">
          <div style="flex-grow:1">1</div>
          <div style="flex-grow:2">2</div>
          <div style="flex-grow:1">3</div>
      </div>
      <div class="row-1">
          <div style="flex-grow:1">1</div>
          <div style="flex-grow:1">2</div>
          <div style="flex-grow:1">3</div>
      </div>

This defines how much a flex item can grow inside the flex container. The default value is 0 (zero). In row-1, the first and the last are of equal sizes, but thesecond item is twice as big as the first/last item.


flex-shrink

1
2
3
4
5
6
7
8
9

      <div class="flex-container">
          <div style="flex-shrink:1">1</div>
          <div style="flex-shrink:1">2</div>
          <div style="flex-shrink:1">3</div>
          <div style="flex-shrink:0">4</div>
          <div style="flex-shrink:3">5</div>
          <div style="flex-shrink:1">6</div>          
          |
          <div style="flex-shrink:1">9</div>
      </div>

The flex-shrink property defines how a flex item should shrink relative to the rest of the flex items. Note: the 4th item with a shrink value of 0 grew while the 5th item with a shrink value of 3 is one-third the size of other items.


flex-basis

1
2
3
4

      <div class="flex-container">
          <div>1</div>
          <div>2</div>
          <div style="flex-basis:300px">3</div>
          <div>4</div>
      </div>

The flex-basis property defines the initial length of an individual flex-item. Note item 1,2 & 4 are set to flex-basis of 50px and item 3 is set to 300px.


flex

1
2
3
4

      <div class="flex-container">
          <div>1</div>
          <div>2</div>
          <div style="flex: 0 0 300px">3</div>
          <div>4</div>
      </div>

The flex property is a shorthand property for defining flex-grow, flex-shrink, and the flex-basis properties. The shorthand property is highly recommended over defining individual properties.


align-self

The align-self property sets the alignment property for the selected flex item inside the flex-container. This property overrides the default alignment property assigned by the container's align-items property.

flex-start

1
2
3
4

      <div class="flex-container" style="align-items:flex-start">
          <div>1</div>
          <div>2</div>
          <div style="flex: 0 0 300px; align-self:flex-end">3</div>
          <div>4</div>
      </div>

The align-self property works similarly for flex-start, flex-end, center, space-between, space-around and space-evenly properties.