Flexbox Playground

Getting Started

1. Clone the repository: git clone https://github.com/Erikote04/Flexbox-Playground.git

2. Open the index.html file in a web browser.

3. Follow the steps down below and become a master in Flexbox

Flexbox Properties

Container

.container {
	flex-direction: row | row-reverse | column | column-reverse; /* direction of the main-axis */
	flex-wrap: nowrap | wrap | wrap-reverse; /* new line? */
	justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly; /* main-axis */
	align-items: stretch | flex-start | flex-end | center | baseline; /* cross-axis */
}

Item

.item {
	align-self: auto | stretch | flex-start | flex-end | center | baseline;
	order: 0 | <integer>;
	flex-grow: 0 | <integer>; /* how much an item can grow */
	flex-shrink: 1 | <integer>; /* how much an item can shrink */
	flex-basis: auto | <length>; /* base width */
}
/* Last 3 properties con be resumed as flex: 0 1 auto */

Roadmap

display: flex

.container {
    display: flex;
}

flex-direction: row

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

flex-direction: row-reverse

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

flex-direction: column

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

flex-direction: column-reverse

.container {
    display: flex;
    flex-direction: column-reverse;
}

justify-content: flex-start

.container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

justify-content: center

.container {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

justify-content: space-between

.container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

justify-content: space-around

.container {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

justify-content: space-evenly

.container {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

justify-content: flex-end

.container {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

align-items: stretch

.container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
}

.i3 {
    height: 200px;
}

align-items: center

.container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.i3 {
	height: 200px;
}

align-items: flex-start

.container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
}

.i3 {
	height: 200px;
}

align-items: flex-end

.container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
}

.i3 {
	height: 200px;
}

align-items: baseline

.container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: baseline;
}

.i2 {
	height: 200px;
}

.i4 {
	font-size: 70px;
}

flex-direction: column; justify-content: center; align-items: center;

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

align-self: stretch;

.container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.i2 {
	height: 200px;
}

.i4 {
	align-self: stretch;
}

align-self: flex-start;

.container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.i2 {
	height: 200px;
}

.i4 {
	align-self: flex-start;
}

align-self: flex-end;

.container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.i2 {
	height: 200px;
}

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

align-self: center;

.container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.i2 {
	height: 200px;
}

.i4 {
	align-self: center;
}

align-self: baseline;

.container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.i2 {
	height: 200px;
}

.i4 {
	align-self: baseline;
	font-size: 70px;
}

order: -1;

.container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.i2 {
	height: 200px;
}

.i4 {
	align-self: center;
	order: -1
}

order: 1;

.container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.i2 {
	height: 200px;
}

.i3 {
	order: 1;
}

.i4 {
	align-self: center;
	order: -1
}

flex-grow;

.container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.item {
    flex-grow: 1;
}

flex-grow;

.container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.item {
    flex-grow: 1;
}

.i3 {
	flex-grow: 2;
}

flex-grow;

.container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.i5 {
	flex-grow: 1;
}

flex-basis;

.container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.i3 {
	flex-basis: 40%;
}

flex-shrink;

.container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.i3 {
	flex-basis: 300px;
	flex-shrink: 1; /* allows the item to shrink */
	/* flex: 0 1 300px */
}

flex-shrink;

.container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.i3 {
	flex-basis: 300px;
	flex-shrink: 0; /* doesn't allows the item to shrink */
	/* flex: 0 0 300px */
}

flex-wrap: nowrap

<div class="container">
	<div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
</div>

.container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
}

flex-wrap: wrap

.container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

align-content: flex-start

.container {
	height: 800px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    align-content: flex-start;
}

align-content: flex-end

.container {
	height: 800px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    align-content: flex-end;
}

align-content: center

.container {
	height: 800px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    align-content: center;
}

align-content: space-between

.container {
	height: 800px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    align-content: space-between;
}

align-content: space-around

.container {
	height: 800px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    align-content: space-around;
}

align-content: space-evenly

.container {
	height: 800px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    align-content: space-evenly;
}