12/26/23, 11:02 AM Making a Website Responsive: Layout with Flexbox Cheatsheet | Codecademy

Cheatsheets / Making a Website Responsive

Layout with Flexbox

CSS Flexbox

The CSS display: flex property sets an HTML element div {

as a block level flex container which takes the full width
display: flex;
of its parent container. Any 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 /* Items based at the center of the
the browser distributes space between and around
parent container: */
content items along the main-axis of their container.
This is when the content items do not use all available div {
space on the major-axis (horizontally). display: flex;
justify-content can have the values of:
justify-content: center;
flex-start
flex-end }
center
space-between /* Items based at the upper-left side of
space-around
the parent container: */
div {
display: flex;
justify-content: flex-start;
}

https://www.codecademy.com/learn/fscj-22-making-a-website-responsive/modules/wdcp-22-layout-with-flexbox-8a62abed-21fe-442a-8d4d-2b84f… 1/5
12/26/23, 11:02 AM Making a Website Responsive: Layout with Flexbox Cheatsheet | Codecademy

flex Property

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

/* 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 div {

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

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/fscj-22-making-a-website-responsive/modules/wdcp-22-layout-with-flexbox-8a62abed-21fe-442a-8d4d-2b84f… 2/5
12/26/23, 11:02 AM Making a Website Responsive: Layout with Flexbox Cheatsheet | Codecademy

flex-grow Property

The CSS flex-grow property allows flex items to grow .panelA {

as the parent container increases in size horizontally.
width: 100px;
This property accepts numerical values and specifies
how an element should grow relative to its sibling flex-grow: 1;
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 .container {

element should shrink as the parent container
display: flex;
decreases in size horizontally. This property accepts a
numerical value which specifies the ratios for the }
shrinkage of a flex item compared to its other sibling
elements within its parent container.
.item-a {
The default value for this property is 1 .
flex-shrink: 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 // Default Syntax
for a flex item before any other space is distributed
flex-basis: auto;
according to other flex properties.

https://www.codecademy.com/learn/fscj-22-making-a-website-responsive/modules/wdcp-22-layout-with-flexbox-8a62abed-21fe-442a-8d4d-2b84f… 3/5
12/26/23, 11:02 AM Making a Website Responsive: Layout with Flexbox Cheatsheet | Codecademy

The CSS flex-flow property

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

CSS display: inline-flex property

The CSS display: inline-flex property sets an HTML .container{

element as an inline flex container which takes only the
display: inline-flex;
required space for the content. Any 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.

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 .container {

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

Print Share

https://www.codecademy.com/learn/fscj-22-making-a-website-responsive/modules/wdcp-22-layout-with-flexbox-8a62abed-21fe-442a-8d4d-2b84f… 4/5
12/26/23, 11:02 AM Making a Website Responsive: Layout with Flexbox Cheatsheet | Codecademy
0

https://www.codecademy.com/learn/fscj-22-making-a-website-responsive/modules/wdcp-22-layout-with-flexbox-8a62abed-21fe-442a-8d4d-2b84f… 5/5