12/05/2021, 21:08

Cheatsheets / Advanced CSS: Flexbox and CSS Transitions

Layout with Flexbox

CSS Flexbox
The CSS display: flex property sets an HTML
element as a block level flex container which div {
takes the full width of its parent container. Any display: flex;
child elements that reside within the flex }
container are called flex items.
Flex items change their size and location in
response to the size and position of their parent
container.

justify-content Property
The CSS justify-content flexbox property
defines how the browser distributes space /* Items based at the center of the
between and around content items along the parent container: */
main-axis of their container. This is when the div {
content items do not use all available space on display: flex;
the major-axis (horizontally). justify-content: center;
justify-content can have the values of:
}
● flex-start
/* Items based at the upper-left
● flex-end
side of the parent container: */
● center div {
● space-between display: flex;
justify-content: flex-start;
● space-around
}

https://www.codecademy.com/learn/advanced-css-flexbox-and-animations/modules/layout-with-flexbox/cheatsheet Page 1 of 4
 12/05/2021, 21:08

flex Property
The flex CSS property specifies how a flex
item will grow or shrink so as to fit within the /* Three properties declared on
space available in its flex container. This is a three lines: */
shorthand property that declares the following .first-flex-item {
properties in order on a single line: flex-grow: 2;
flex-shrink: 1;
● flex-grow
flex-basis: 150px;
● flex-shrink }
● flex-basis
/* Same three properties declared
on one line: */
.first-flex-item {
flex: 2 1 150px;
}

flex-direction Property
The flex-direction CSS property specifies
how flex items are placed in the flex container - div {
either vertically or horizontally. This property display: flex;
also determines whether those flex items appear flex-direction: row-reverse;
in order or in reverse order. }

align-content Property
The align-content property modifies the
behavior of the flex-wrap property. It determines
how to space rows from top to bottom (ie. along
the cross axis). Multiple rows of items are
needed for this property to take effect.

https://www.codecademy.com/learn/advanced-css-flexbox-and-animations/modules/layout-with-flexbox/cheatsheet Page 2 of 4
 12/05/2021, 21:08

flex-grow Property
The CSS flex-grow property allows flex items
to grow as the parent container increases in size .panelA {
horizontally. This property accepts numerical width: 100px;
values and specifies how an element should flex-grow: 1;
grow relative to its sibling elements based on }
this value.
The default value for this property is 0 .
/* This panelB element will stretch
twice wider than the panelA element
*/
.panelB {
width: 100px;
flex-grow: 2;
}

flex-shrink Property
The CSS flex-shrink property determines how
an element should shrink as the parent container .container {
decreases in size horizontally. This property display: flex;
accepts a numerical value which specifies the }
ratios for the shrinkage of a flex item compared
to its other sibling elements within its parent .item-a {
container.
flex-shrink: 1;
The default value for this property is 1 .
/* The value 1 indicates that the
item should shrink. */
}

.item-b {
flex-shrink: 2;
/* The value 2 indicates that the
item should shrink twice than the
element item-a. */
}

Css flex-basis property

The flex-basis CSS property sets the initial
base size for a flex item before any other space // Default Syntax
is distributed according to other flex properties. flex-basis: auto;

https://www.codecademy.com/learn/advanced-css-flexbox-and-animations/modules/layout-with-flexbox/cheatsheet Page 3 of 4
 12/05/2021, 21:08

The CSS flex-flow property

The CSS property flex-flow provides a
shorthand for the properties flex-direction // In this example code block,
and flex-wrap . The value of the flex- "column" is the value of the
direction property specifies the direction of the property "flex-direction" and
flex items and the value of the flex-wrap "wrap" is the value of the property
property allows flex items to move to the next
"flex-wrap".
line instead of shrinking to fit inside the flex
container. The flex-flow property should be
.container {
declared on the flex container.
display: flex;
flex-flow: column wrap;
}

CSS display: inline-flex property

The CSS display: inline-flex property sets
an HTML element as an inline flex container .container{
which takes only the required space for the display: inline-flex;
content. Any child elements that reside within }
the flex container are caleld flex items. Flex
items change their size and location in response
to the size and position of their parent container.

Flexbox Properties align-items

When working with CSS flexbox align-items is
used to align flex items vertically within a parent
container.

Css flex-wrap property

The flex-wrap property specifies whether flex
items should wrap or not. This applies to flex .container {
items only. Once you tell your container to flex- display: flex;
wrap , wrapping become a priority over flex-wrap: wrap;
shrinking. Flex items will only begin to wrap if width: 200px;
their combined flex-basis value is greater
}
than the current size of their flex container.

https://www.codecademy.com/learn/advanced-css-flexbox-and-animations/modules/layout-with-flexbox/cheatsheet Page 4 of 4