book now on khaalipaper Best hindi blog and story website

CSS Flexbox - CSS flex property

The flex container becomes flexible by setting the display property to flex:

1
2
3

A Flexible Layout must have a parent element with the display property set to flex. Direct child elements(s) of the flexible container automatically becomes flexible items.

<div class="flexContainer">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
----------------------------
.flex-container {
    display: flex;
}
.flexContainer > div {
  background-color: #f1f1f1;
  margin: 5px;
  padding: 5px;
  font-size: 14px;
}

The flex container properties are:

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

The flex-direction Property

The flex-direction property defines in which direction the container wants to stack the flex items.

The column value stacks the flex items vertically (from top to bottom):

1
2
3

The column-reverse value stacks the flex items vertically (from bottom to top):

1
2
3

The row value stacks the flex items horizontally (from left to right):

1
2
3

The row-reverse value stacks the flex items horizontally (from right to left):

1
2
3

The flex-wrap Property

The flex-wrap property specifies whether the flex items should wrap or not.The examples below have 18 flex items, to better demonstrate the flex-wrap property.

The wrap value specifies that the flex items will wrap if necessary:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

The nowrap value specifies that the flex items will not wrap (this is default):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

The wrap-reverse value specifies that the flexible items will wrap if necessary, in reverse order:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

The flex-flow Property

The flex-flow property is a shorthand property for setting both the flex-direction and flex-wrap properties.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

The justify-content Property

The justify-content property is used to align the flex items:

1
2
3

flex-start

The flex-start value aligns the flex items at the beginning of the container (this is default): The "align-items: flex-start;" aligns the flex items at the top of the container:

1
2
3

flex-end

The flex-end value aligns the flex items at the end of the container:

1
2
3

space-around

The space-around value displays the flex items with space before, between, and after the lines:

1
2
3

space-between

The space-between value displays the flex items with space between the lines:

1
2
3

The align-items Property

The align-items property is used to align the flex items. The "align-items: center;" aligns the flex items in the middle of the container:

1
2
3

flex-end

The flex-end value aligns the flex items at the bottom of the container: The align-items Property The "align-items: flex-end;" aligns the flex items at the bottom of the container:

1
2
3

stretch

The stretch value stretches the flex items to fill the container (this is default): The "align-items: stretch;" stretches the flex items to fill the container (this is default):

1
2
3

space-between

The space-between value displays the flex lines with equal space between them: The align-content Property The "align-content: space-between;" displays the flex lines with equal space between them:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

center

The center value displays display the flex lines in the middle of the container: The align-content Property The "align-content: center;" displays the flex lines in the middle of the container:

1
2
3

justify-content

Set both the justify-content and align-items properties to center, and the flex item will be perfectly centered:

1
2
3

justify-content-between

Set both the justify-content-between and align-items properties to center, and the flex item will be perfectly centered:

1
2
3