flex.md

Display Flex

Table of Content

• Flexbox mode
• Apocalypse Zombie mode
• Revelation Robots mode

Flexbox mode

Using the flexbox

.container {
	display: flex;
}

The result:

.container {
	display: flex;
	flex-direction: row; /* default */
	flex-wrap: nowrap; /* default */
	flex-flow: row nowrap;/* default (shorthand) */
	justify-content: flex-start; /* default */
	align-items: stretch; /* default */
	align-content: flex-start; /* default but no effect */
}

View support

Apocalypse Zombie mode

Using the CSS 2.1 properties

.container {
	display: block;
}

.container > * {
	display: inline-block;
	margin-right: -4px;
}

The result:

.container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap; /* the flexbox default is the nowrap */
	flex-flow: row wrap; /* the flexbox default is the nowrap */
	justify-content: flex-start;
	align-items: flex-start;
	align-content: flex-start;
}

View support

Revelation Robots mode

Using the CSS Grid Layout Module Level 1

.container {
	display: grid;
	grid-template-columns: auto auto auto;
	grid-template-rows: auto;
}

/* Note:
In the "grid-template-columns" values,
use the "auto" equal the number of flex-items.
*/

The result:

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

View support

<-- Back to home