[go: up one dir, main page]
Scribd
Upload
9 views1 page

Flexbox Cheat Sheet

The Flexbox Cheat Sheet provides a comprehensive overview of properties for flex containers and items. It includes descriptions and possible values for properties such as display, flex-direction, justify-content, and align-items for containers, as well as flex, flex-grow, and align-self for items. This guide serves as a quick reference for implementing Flexbox in CSS layouts.

Uploaded by

gamerdimid
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
9 views1 page

Flexbox Cheat Sheet

The Flexbox Cheat Sheet provides a comprehensive overview of properties for flex containers and items. It includes descriptions and possible values for properties such as display, flex-direction, justify-content, and align-items for containers, as well as flex, flex-grow, and align-self for items. This guide serves as a quick reference for implementing Flexbox in CSS layouts.

Uploaded by

gamerdimid
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 1

Flexbox Cheat Sheet

Flex Container (Parent) Properties

Property Description Possible Values

display Enables flex context flex, inline-flex

flex-direction Main axis direction row, row-reverse, column, column-reverse

flex-wrap Wrapping of items nowrap, wrap, wrap-reverse

flex-flow Shorthand for direction + wrap e.g., row wrap

justify-content Align items on main axis flex-start, flex-end, center, space-between, spa

align-items Align items on cross axis stretch, flex-start, flex-end, center, baseline

align-content Space between rows stretch, flex-start, flex-end, center, space-betw

gap Space between items e.g., 10px

row-gap / column-gap Set row/column gaps e.g., 10px, 1rem

Flex Item (Child) Properties

Property Description Possible Values

flex Shorthand for grow/shrink/basis e.g., 1, 2 1 200px, auto

flex-grow Item growth factor 0, 1, 2, ...

flex-shrink Item shrink factor 0, 1, 2, ...

flex-basis Initial item size auto, 100px, 10%

align-self Override align-items auto, flex-start, flex-end, center, baseline, stret

order Change display order Integer, default 0

You might also like