Cheatsheets / Getting More Advanced with Design

Layout with Flexbox

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

CSS display: inline-flex property

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

flex-grow Property
The CSS flex-grow property allows ex items to
grow as the parent container increases in size .panelA {
horizontally. This property accepts numerical values width: 100px;
and speci es how an element should grow relative to its flex-grow: 1;
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;
}

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

Flexbox Properties align-items

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

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 accepts a display: flex;
numerical value which speci es the ratios for the }
shrinkage of a ex 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 ex-basis property

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

/
flex Property
The flex CSS property speci es how a ex item will
grow or shrink so as to t within the space available in /* Three properties declared on three
its flex container. This is a shorthand property that lines: */
declares the following properties in order on a single .first-flex-item {
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;
}

Css ex-wrap property

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

align-content Property
The align-content property modi es the
behavior of the ex-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 e ect.

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

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