First

Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi sed eius cumque dolor fuga in quo non, numquam repellat perferendis quia ipsam saepe aperiam. Architecto, perferendis dolor quisquam suscipit quae enim rem nihil eligendi eius recusandae iste assumenda, voluptates laboriosam. Commodi voluptatem nisi voluptates nam, debitis explicabo praesentium ut pariatur?

Second

Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus, a voluptates earum, dolore magnam iure blanditiis, necessitatibus minima sequi itaque saepe. Alias placeat dolores iure dolorum deserunt molestiae saepe voluptatem, aliquid est et soluta perspiciatis. Quae, tempore ipsam? Distinctio, esse! Sapiente veniam corporis quod, aliquid eos quia voluptatibus eligendi hic?

Third

Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus, a voluptates earum, dolore magnam iure blanditiis, necessitatibus minima sequi itaque saepe. Alias placeat dolores iure dolorum deserunt molestiae saepe voluptatem, aliquid est et soluta perspiciatis. Quae, tempore ipsam? Distinctio, esse! Sapiente veniam corporis quod, aliquid eos quia voluptatibus eligendi hic?

Fourth

Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus, a voluptates earum, dolore magnam iure blanditiis, necessitatibus minima sequi itaque saepe. Alias placeat dolores iure dolorum deserunt molestiae saepe voluptatem, aliquid est et soluta perspiciatis. Quae, tempore ipsam? Distinctio, esse! Sapiente veniam corporis quod, aliquid eos quia voluptatibus eligendi hic?



Align Content

1
2
3

Align Items

1
2
3

Align Self

1
2
3

Flex

1
2
3

Flex Basis

1
2
3

Flex Direction

1
2
3
4
5
6

Flex Flow

1
2
3
4
5
6

Flex Grow

1
2
3

Flex Shrink

1
2
3

Flex Wrap

1
2
3

Justify Content

1
2
3

justify-content: flex-end;

Item 1
Item 2
Item 3

justify-content: center;

Item 1
Item 2
Item 3

justify-content: space-around;

Item 1
Item 2
Item 3

justify-content: space-between;

Item 1
Item 2
Item 3

align-items: flex-end;

Item 1
Item 2
Item 3

align-items: center;

Item 1
Item 2
Item 3

justify-content: space-around; align-items: flex-end;

Item 1
Item 2
Item 3

flex-direction: row-reverse;

Item 1
Item 2
Item 3

flex-direction: column;

Item 1
Item 2
Item 3

flex-direction: row-reverse; justify-content: flex-end;

Item 1
Item 2
Item 3

flex-direction: column; align-items: flex-start;

Item 1
Item 2
Item 3

flex-direction: column-reverse; justify-content: flex-end;

Item 1
Item 2
Item 3

flex-direction: column; justify-content: space-between;

Item 1
Item 2
Item 3

flex-direction: column; justify-content: center;

Item 1
Item 2
Item 3

flex-direction: row-reverse; align-items: flex-end;

Item 1
Item 2
Item 3

align-items: flex-start;

Item 1
Item 2
Item 3

flex-wrap: wrap;

Item 1
Item 2
Item 3

flex-direction: column; flex-wrap: wrap;

Item 1
Item 2
Item 3

flex-direction: column; flex-wrap: wrap;

Item 1
Item 2
Item 3

flex-wrap: wrap; align-content: flex-start;

Item 1
Item 2
Item 3

flex-wrap: wrap; align-content: flex-end;

Item 1
Item 2
Item 3

flex-wrap: wrap; flex-direction: column-reverse; align-content: center;

Item 1
Item 2
Item 3

flex-direction: column-reverse; align-self: flex-end; flex-wrap: wrap-reverse; align-content: space-between; justify-content: center;

Item 1
Item 2
Item 3