[go: up one dir, main page]
Scribd
Upload
20 views4 pages

Flexbox All Commands

This document is a Flexbox cheat sheet that outlines various container and item properties used in Flexbox layout. It includes commands such as display, flex-direction, justify-content, and align-items for containers, as well as order, flex-grow, and align-self for items. Additionally, it provides example code snippets for practical application of these properties.

Uploaded by

Ehtasham Umar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
20 views4 pages

Flexbox All Commands

This document is a Flexbox cheat sheet that outlines various container and item properties used in Flexbox layout. It includes commands such as display, flex-direction, justify-content, and align-items for containers, as well as order, flex-grow, and align-self for items. Additionally, it provides example code snippets for practical application of these properties.

Uploaded by

Ehtasham Umar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

📘 Flexbox Cheat Sheet – All Commands

with Explanations and Code


🔧 1. Container Properties (Applied to the flex container)

display: flex;
Converts an element into a flex container, enabling the use of Flexbox.

.container {
display: flex;
}

flex-direction
Defines the direction of main axis.
Options: row (default), row-reverse, column, column-reverse

.container {
display: flex;
flex-direction: row;
}

flex-wrap
Controls whether items stay in one line or wrap.
Options: nowrap (default), wrap, wrap-reverse

.container {
display: flex;
flex-wrap: wrap;
}

flex-flow
Shorthand for flex-direction and flex-wrap.

.container {
flex-flow: row wrap;
}
justify-content
Aligns items along the main axis.
Options: flex-start, flex-end, center, space-between, space-around, space-evenly

.container {
justify-content: space-between;
}

align-items
Aligns items along the cross axis.
Options: stretch (default), flex-start, flex-end, center, baseline

.container {
align-items: center;
}

align-content
Aligns rows (when wrapping) in the cross axis.
Options: flex-start, flex-end, center, space-between, space-around, stretch

.container {
flex-wrap: wrap;
align-content: space-around;
}

📦 2. Item Properties (Applied to flex items)

order
Controls the order of items in the container (default is 0).

.item {
order: 2;
}

flex-grow
Defines how much a flex item grows relative to the rest.

.item {
flex-grow: 1;
}
flex-shrink
Defines how much a flex item shrinks when needed.

.item {
flex-shrink: 1;
}

flex-basis
Defines the initial size of an item before space is distributed.

.item {
flex-basis: 200px;
}

flex
Shorthand for flex-grow, flex-shrink, and flex-basis.

.item {
flex: 1 1 200px;
}
/* Or just */
.item {
flex: 1;
}

align-self
Overrides align-items for a specific item.
Options: auto, flex-start, flex-end, center, baseline, stretch

.item {
align-self: flex-end;
}

🧪 Bonus Example
HTML:

<div class="container">
<div class="item">One</div>
<div class="item">Two</div>
<div class="item">Three</div>
</div>
CSS:

.container {
display: flex;
justify-content: space-evenly;
align-items: center;
height: 200px;
}

.item {
background: lightblue;
padding: 10px;
border: 1px solid #333;
}

You might also like