Advanced CSS: Flexbox and CSS Transitions: Layout With Flexbox Cheatsheet - Codecademy
Advanced CSS: Flexbox and CSS Transitions: Layout With Flexbox Cheatsheet - Codecademy
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. */
}
https://www.codecademy.com/learn/advanced-css-flexbox-and-animations/modules/layout-with-flexbox/cheatsheet Page 3 of 4
12/05/2021, 21:08
https://www.codecademy.com/learn/advanced-css-flexbox-and-animations/modules/layout-with-flexbox/cheatsheet Page 4 of 4