settings

sample base html

<div class="flex-container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
</div>

flex-direction

row(default)
1
2
3
4
5
.flex-container {
  display: flex;
}
row-reverse
1
2
3
4
5
.flex-container {
  display: flex;
  flex-direction: row-reverse;
}
column
1
2
3
4
5
.flex-container {
  display: flex;
  flex-direction: column;
}
column-reverse
1
2
3
4
5
.flex-container {
  display: flex;
  flex-direction: column-reverse;
}

flex-wrap

nowrap(default)
1
2
3
4
5
6
7
8
9
.flex-container {
  display: flex;
}
wrap
1
2
3
4
5
6
7
8
9
.flex-container {
  display: flex;
  flex-wrap: wrap;
}
wrap-reverse
1
2
3
4
5
6
7
8
9
.flex-container {
  display: flex;
  flex-wrap: wrap-reverse;
}

flex-flow - flex-direction flx-wrap

flex-direction=column and flex-wrap: wrap
1
2
3
4
5
6
7
8
9
.flex-container {
  display: flex;
  flex-flow: row-reverse wrap;
}

justify-content

flex-start(default)
1
2
3
4
5
.flex-container {
  display: flex;
}
flex-end
1
2
3
4
5
.flex-container {
  display: flex;
  justify-content: flex-end;
}
center
1
2
3
4
5
.flex-container {
  display: flex;
  justify-content: center;
}
space-between
1
2
3
4
5
.flex-container {
  display: flex;
  justify-content: space-between;
}
space-around
1
2
3
4
5
.flex-container {
  display: flex;
  justify-content: space-around;
}

align-items

stretch(default)
1
2
3
4
5
.flex-container {
  display: flex;
  align-items: stretch;
}
flex-start
1
2
3
4
5
.flex-container {
  display: flex;
  align-items: flex-start;
}
flex-end
1
2
3
4
5
.flex-container {
  display: flex;
  align-items: flex-end;
}
flex-center
1
2
3
4
5
.flex-container {
  display: flex;
  align-items: center;
}
baseline
1
2
3
4
5
.flex-container {
  display: flex;
  align-items: baseline;
}
<div class="box" style="height: 100px;">1</div>
<div class="box" style="margin-top: 20px; height: 60px">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>

align-content

stretch(default)
1
2
3
4
5
6
7
8
9
.flex-container {
  display: flex;
  flex-wrap: wrap;
}
flex-start
1
2
3
4
5
6
7
8
9
.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}
flex-end
1
2
3
4
5
6
7
8
9
.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
}
center
1
2
3
4
5
6
7
8
9
.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}
space-between
1
2
3
4
5
6
7
8
9
.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}
space-around
1
2
3
4
5
6
7
8
9
.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
}

flex-grow

1
flex-grow: 1
2
3

1
2
flex-grow: 1
3

1
2
3
flex-grow: 1

1
flex-grow: 1
2
flex-grow: 1
3

1
flex-grow: 1
2
3
flex-grow: 1

1
flex-grow: 1
2
flex-grow: 1
3
flex-grow: 1

1
flex-grow: 1
2
flex-grow: 2
3
flex-grow: 3

1
flex-grow: 5
2
flex-grow: 5
3
flex-grow: 1

flex-shrink

1
flex-shrink: 3
2
flex-shrink: 3
3
flex-shrink: 2

1
flex-shrink: 4
2
flex-shrink: 4
3
flex-shrink: 2

1
flex-shrink: 5
2
flex-shrink: 4
3
flex-shrink: 3

flex-basis

1
flex-basis: 20%
2
flex-basis: 140px
3
flex-basis: 40%

flex - flex-grow flex-shrink flex-basis

1
flex: 1 3 10%;
2
flex: 2 2 20%;
3
flex: 3 1 30%;

order

1
order: 1
2
order: 0
3
order: -1
4
order: 3
5
order: 2