My Flex Box Cheat Sheet
Flex-direction
Default behaviour
A
B
C
Row-reverse
A
B
C
Column
A
B
C
Column-reverse
A
B
C
Justify-content
Flex-start is default
Flex-end
A
B
C
Flex-end on row-reverse
A
B
C
Flex-center
A
B
C
Space-between
A
B
C
Space-around
A
B
C
Align-items
Flex-start
A Sit hic deserunt deserunt blanditiis provident veniam mollitia! Iusto culpa suscipit quasi voluptatibus neque animi lorem? Sint soluta dolorum earum dolores illo omnis quia, impedit voluptas praesentium inventore. Reprehenderit beatae.
Ipsum accusamus ipsam dolor deleniti provident. Corporis modi veniam doloribus eaque excepturi quisquam consequuntur ipsam? Repellat omnis sit magnam rerum numquam. Debitis veritatis sunt repellat nostrum temporibus laboriosam sequi eius!
B Elit aspernatur dolor enim ut modi. Unde quos ex modi obcaecati optio minima corporis excepturi? Adipisci doloremque commodi dolorum delectus dolores! Accusantium doloribus modi porro qui aspernatur magni dignissimos. Provident!
C Sit totam labore voluptatem omnis a suscipit impedit debitis obcaecati ipsum. Itaque tempora rem animi sit dolorem quos! Dignissimos repudiandae minus laborum ab porro corporis. Reiciendis consequatur numquam quaerat quibusdam.
Flex-end
A Sit hic deserunt deserunt blanditiis provident veniam mollitia! Iusto culpa suscipit quasi voluptatibus neque animi lorem? Sint soluta dolorum earum dolores illo omnis quia, impedit voluptas praesentium inventore. Reprehenderit beatae.
Ipsum accusamus ipsam dolor deleniti provident. Corporis modi veniam doloribus eaque excepturi quisquam consequuntur ipsam? Repellat omnis sit magnam rerum numquam. Debitis veritatis sunt repellat nostrum temporibus laboriosam sequi eius!
B Elit aspernatur dolor enim ut modi. Unde quos ex modi obcaecati optio minima corporis excepturi? Adipisci doloremque commodi dolorum delectus dolores! Accusantium doloribus modi porro qui aspernatur magni dignissimos. Provident!
C Sit totam labore voluptatem omnis a suscipit impedit debitis obcaecati ipsum. Itaque tempora rem animi sit dolorem quos! Dignissimos repudiandae minus laborum ab porro corporis. Reiciendis consequatur numquam quaerat quibusdam.
Flex-center
A Sit hic deserunt deserunt blanditiis provident veniam mollitia! Iusto culpa suscipit quasi voluptatibus neque animi lorem? Sint soluta dolorum earum dolores illo omnis quia, impedit voluptas praesentium inventore. Reprehenderit beatae.
Ipsum accusamus ipsam dolor deleniti provident. Corporis modi veniam doloribus eaque excepturi quisquam consequuntur ipsam? Repellat omnis sit magnam rerum numquam. Debitis veritatis sunt repellat nostrum temporibus laboriosam sequi eius!
B Elit aspernatur dolor enim ut modi. Unde quos ex modi obcaecati optio minima corporis excepturi? Adipisci doloremque commodi dolorum delectus dolores! Accusantium doloribus modi porro qui aspernatur magni dignissimos. Provident!
C Sit totam labore voluptatem omnis a suscipit impedit debitis obcaecati ipsum. Itaque tempora rem animi sit dolorem quos! Dignissimos repudiandae minus laborum ab porro corporis. Reiciendis consequatur numquam quaerat quibusdam.
Baseline
All flex items are aligned such that their baselines align
A Sit hic deserunt
deserunt blanditiis provident veniam mollitia! Iusto culpa suscipit quasi voluptatibus neque animi lorem? Sint soluta dolorum earum dolores illo omnis quia, impedit voluptas praesentium inventore. Reprehenderit beatae. Ipsum accusamus ipsam dolor deleniti provident. Corporis modi veniam doloribus eaque excepturi quisquam consequuntur ipsam? Repellat omnis sit magnam rerum numquam. Debitis veritatis sunt repellat nostrum temporibus laboriosam sequi eius!
deserunt blanditiis provident veniam mollitia! Iusto culpa suscipit quasi voluptatibus neque animi lorem? Sint soluta dolorum earum dolores illo omnis quia, impedit voluptas praesentium inventore. Reprehenderit beatae. Ipsum accusamus ipsam dolor deleniti provident. Corporis modi veniam doloribus eaque excepturi quisquam consequuntur ipsam? Repellat omnis sit magnam rerum numquam. Debitis veritatis sunt repellat nostrum temporibus laboriosam sequi eius!
B Elit aspernatur dolor enim ut modi. Unde quos ex modi obcaecati optio minima corporis excepturi? Adipisci doloremque commodi dolorum delectus dolores! Accusantium doloribus modi porro qui aspernatur magni dignissimos. Provident!
C Sit totam labore
voluptatem omnis a suscipit impedit debitis obcaecati ipsum. Itaque tempora rem animi sit dolorem quos! Dignissimos repudiandae minus laborum ab porro corporis. Reiciendis consequatur numquam quaerat quibusdam.Stretch (this is the default behaviour)
A Sit hic deserunt deserunt blanditiis provident veniam mollitia! Iusto culpa suscipit quasi voluptatibus neque animi lorem? Sint soluta dolorum earum dolores illo omnis quia, impedit voluptas praesentium inventore. Reprehenderit beatae.
Ipsum accusamus ipsam dolor deleniti provident. Corporis modi veniam doloribus eaque excepturi quisquam consequuntur ipsam? Repellat omnis sit magnam rerum numquam. Debitis veritatis sunt repellat nostrum temporibus laboriosam sequi eius!
B Elit aspernatur dolor enim ut modi. Unde quos ex modi obcaecati optio minima corporis excepturi? Adipisci doloremque commodi dolorum delectus dolores! Accusantium doloribus modi porro qui aspernatur magni dignissimos. Provident!
C Sit totam labore voluptatem omnis a suscipit impedit debitis obcaecati ipsum. Itaque tempora rem animi sit dolorem quos! Dignissimos repudiandae minus laborum ab porro corporis. Reiciendis consequatur numquam quaerat quibusdam.
Align-self
Basically this property of an item overrides the parent's align-items. Here the property with the value center on the second item
A Sit hic deserunt deserunt blanditiis provident veniam mollitia! Iusto culpa suscipit quasi voluptatibus neque animi lorem? Sint soluta dolorum earum dolores illo omnis quia, impedit voluptas praesentium inventore. Reprehenderit beatae.
Ipsum accusamus ipsam dolor deleniti provident. Corporis modi veniam doloribus eaque excepturi quisquam consequuntur ipsam? Repellat omnis sit magnam rerum numquam. Debitis veritatis sunt repellat nostrum temporibus laboriosam sequi eius!
B Elit aspernatur dolor enim ut modi. Unde quos ex modi obcaecati optio minima corporis excepturi? Adipisci doloremque commodi dolorum delectus dolores! Accusantium doloribus modi porro qui aspernatur magni dignissimos. Provident!
C Sit totam labore voluptatem omnis a suscipit impedit debitis obcaecati ipsum. Itaque tempora rem animi sit dolorem quos! Dignissimos repudiandae minus laborum ab porro corporis. Reiciendis consequatur numquam quaerat quibusdam.
Order
Order property on items re-arrange the order they are display in the parent. Here the second item has an order of 3. Negative numbers are valid values
A
B
C
Flex-wrap
Nowrap (default)
A Sit hic deserunt deserunt blanditiis provident
B Elit aspernatur dolor enim ut modi.
C Sit totam labore voluptatem omnis a suscipit impedit debitis obcaecati ipsum. Itaque tempora rem animi sit dolorem quos!
Wrap
A Sit hic deserunt deserunt blanditiis provident
B Elit aspernatur dolor enim ut modi.
C Sit totam labore voluptatem omnis a suscipit impedit debitis obcaecati ipsum. Itaque tempora rem animi sit dolorem quos!
Wrap-reverse
A Sit hic deserunt deserunt blanditiis provident
B Elit aspernatur dolor enim ut modi.
C Sit totam labore voluptatem omnis a suscipit impedit debitis obcaecati ipsum. Itaque tempora rem animi sit dolorem quos!
Flex-flow
Flex-flow is a shorthand property for flex-direction and flex-wrap:
/* flex-flow: <'flex-direction'> */
flex-flow: row;
flex-flow: row-reverse;
flex-flow: column;
flex-flow: column-reverse;
/* flex-flow: <'flex-wrap'> */
flex-flow: nowrap;
flex-flow: wrap;
flex-flow: wrap-reverse;
/* flex-flow: <'flex-direction'> and <'flex-wrap'> */
flex-flow: row nowrap;
flex-flow: column wrap;
flex-flow: column-reverse wrap-reverse;