#Playing Flexboxes

How it really works.

flex-wrap wrap

1

2

3

4

5

6

7

8

9

10

11

12

1

2

3

4

5

6

width: 400px
display: flex
flex-wrap: wrap
.box* //"*" for box number..
width: 100%

flex-wrap nowrap

1

2

3

4

5

6

7

8

9

10

11

12

1

2

3

4

5

6

width: 400px
display: flex
flex-wrap: nowrap
.box* //"*" for box number..
width: 100%

flex-wrap nowrap

justify-content space-around

1

2

3

4

5

6

7

8

9

10

11

12

width: 400px
display: flex
flex-wrap: nowrap
justify-content: space-around
.box* //"*" for box number..
width: 100%

flex-wrap wrap

justify-content space-around

1

2

3

4

5

6

7

8

9

10

11

12

width: 420px
display: flex
flex-wrap: wrap
justify-content: space-around
.box* //"*" for box number..
width: 100%

justify-content space-between

1

2

3

4

5

6

7

8

9

10

11

12

width: 420px
display: flex
flex-wrap: wrap
justify-content: space-between
.box* //"*" for box number..
width: 100%

justify-content center

1

2

3

4

5

6

7

8

9

10

11

12

width: 420px
display: flex
flex-wrap: wrap
justify-content: center
.box* //"*" for box number..
width: 100%

justify-content flex-start

1

2

3

4

5

6

7

8

9

10

11

12

width: 420px
display: flex
flex-wrap: wrap
justify-content: flex-start
.box* //"*" for box number..
width: 100%

justify-content flex-end

1

2

3

4

5

6

7

8

9

10

11

12

width: 420px
display: flex
flex-wrap: wrap
justify-content: flex-end
.box* //"*" for box number..
width: 100%

align-items center

1

2

3

4

5

6

7

8

9

10

11

12

height: 420px
display: flex
flex-wrap: wrap
align-items: center
.box* //"*" for box number..
width: 100%

align-items flex-start

1

2

3

4

5

6

7

8

9

10

11

12

height: 420px
display: flex
flex-wrap: wrap
align-items: flex-start
.box* //"*" for box number..
width: 100%

align-items flex-end

1

2

3

4

5

6

7

8

9

10

11

12

height: 420px
display: flex
flex-wrap: wrap
align-items: flex-end
.box* //"*" for box number..
width: 100%

align-content space-between

1

2

3

4

5

6

7

8

9

10

11

12

height: 420px
display: flex
flex-wrap: wrap
align-content: space-between
.box* //"*" for box number..
width: 100%

align-content space-around

1

2

3

4

5

6

7

8

9

10

11

12

height: 420px
display: flex
flex-wrap: wrap
align-content: space-around
.box* //"*" for box number..
width: 100%

align-self flex-end

1

2

3

4

5

6

7

8

9

10

11

12

height: 420px
display: flex
flex-wrap: wrap
.box2
align-self: flex-end
.box* //"*" for box number..
width: 100%

flex-direction row-reverse

1

2

3

4

5

6

7

8

9

10

11

12

width: 420px
display: flex
flex-wrap: wrap
justify-content: center
flex-direction: row-reverse
.box* //"*" for box number..
width: 100%

flex-direction column-reverse

1

2

3

4

5

6

7

8

9

10

11

12

width: 420px
display: flex
flex-wrap: wrap
justify-content: center
flex-direction: column-reverse
.box* //"*" for box number..
width: 100%

flex-grow 10

1

2

3

4

5

6

7

8

9

10

11

12

1

2

3

4

5

6

width: 420px
display: flex
flex-wrap: wrap
justify-content: center
flex-direction: row
.box3
flex-grow: 10
.box6
flex-grow: 10
.box* //"*" for box number..
width: 100%

flex-basis 160px

1

2

3

4

5

6

7

8

9

10

11

12

1

2

3

4

5

6

width: 420px
display: flex
flex-wrap: wrap
justify-content: center
flex-direction: row
.box1
flex-basis: 160px
.box3
flex-grow: 10
.box6
flex-grow: 10
.box* //"*" for box number..
width: 100%