Scribd
Upload
160 views1 page

Flex Cheat Sheet

The document summarizes key properties for controlling flex items and flex containers. It lists properties for controlling the main and cross axes, alignment of items, wrapping behavior, and individual item properties like flex-grow, flex-shrink, and order. Flexbox provides control over the layout of items within a flex container.

Uploaded by

jezzie
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
160 views1 page

Flex Cheat Sheet

The document summarizes key properties for controlling flex items and flex containers. It lists properties for controlling the main and cross axes, alignment of items, wrapping behavior, and individual item properties like flex-grow, flex-shrink, and order. Flexbox provides control over the layout of items within a flex container.

Uploaded by

jezzie
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

MAIN AXIS

FLEX CONTAINER FLEX ITEMS


CROSS AXIS

align-self: auto | stretch | flex-start | flex-


1 gap: 0 | <length> 1
end | center | baseline
👉 To create space between items, without using margin
👉 To overwrite align-items for individual flex items

justify-content: flex-start | flex-end | center |


2
space-between | space-around | space-evenly 2 flex-grow: 0 | <integer>

👉 To align items along main axis (horizontally, by default) 👉 To allow an element to grow 0 means no, 1 means yes)

align-items: stretch | flex-start | flex-end |


3 3 flex-shrink: 1 | <integer>
center | baseline
👉 To allow an element to shrink 0 means no, 1 means yes)
👉 To align items along cross axis (vertically, by default)

flex-direction: row | row-reverse | column | 4 flex-basis: auto | <length>


4
column-reverse
👉 To define an item’s width, instead of the width property
👉 To define which is the main axis

5 flex-wrap: nowrap | wrap | wrap-reverse 5 flex: 0 1 auto | <int> <int> <len>

👉 To allow items to wrap into a new line if they are too large 👉 Recommended shorthand for flex-grow, -shrink, -basis.

align-content: stretch | flex-start | flex-end | 6 order: 0 | <integer>


6
center | space-between | space-around
👉 Controls order of items. 1 makes item first, 1 makes it last
👉 Only applies when there are multiple lines (flex-wrap: wrap)
-
(
(
+
+

You might also like