Frontend Meetup Romandie

Marc Friederich

@zufrieden – github.com/zufrieden

Can I use flexbox ?

In a nutshell

1

Container alter its items (width/height) to best fill the available space

2

Direction-agnostic instead of vertically-based (block) or horizontally-based (inline)

☞ ☜ ☝︎ ☟

3

Bonus : baseline

.container {
	display: flex;
	align-items: baseline;
}
						

FlexBox Basics

flex-direction:row;

Main axis ☞ Cross axis ☟

flex-direction:column;

Main axis ☟ Cross axis ☞

display: flex

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

Flex-direction

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

Flex-direction

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

Order

.item:nth-child(5) {
	order: -1;
}
.item:nth-child(4) {
	order: -1;
}
.item:nth-child(2) {
	order: 1;
}
	

Main axis

Justify-content

center

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

Justify-content

space-between

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

Justify-content

space-between

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

Justify-content

space-around

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

Cross axis

Align-items

stretch

.container {
	display: flex;
	height: 200px;
	/* align-items: stretch; */
}
	

Align-items

center

.container {
	display: flex;
	height: 200px;
	align-items: center;
}
	

Align-items

baseline

.container {
	display: flex;
	height: 200px;
	align-items: baseline;
}
	

Align-self

.container {
	display: flex;
	height: 200px;
	align-items: flex-end;
}
.item:nth-child(3) {
	align-self: stretch;
}
	

Margin

.container {
	display: flex;
	height: 200px;
}
.item:nth-child(3) {
	margin-left: auto;
}
	

Margin

.container {
	display: flex;
	height: 200px;
}
.item:nth-child(1) {
	margin-right: auto;
}
.item:nth-child(3) {
	margin-left: auto;
}
	

Margin

.container {
	display: flex;
	height: 200px;
}
.item {
	margin: auto;
}
	

Multi row, multi column

Flex-wrap

	.container {
		display: flex;
		flex-wrap: wrap;
	}
	.item {
		flex: 1 0 150px;  // flex-grow flex-shrink flex-basis
	}
		

Align-content

	.container {
		display: flex;
		flex-wrap: wrap;
		align-content: flex-end;
	}
		

Align-content

	.container {
		display: flex;
		flex-wrap: wrap;
		align-content: stretch;
	}
		

Align-content

	.container {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		align-content: stretch;
	}
		

flex item

grow, shrink & basis

Flex-grow

Spare space?

.container {
	display: flex;
}
.item:nth-child(4) {
	flex-grow: 1;
}
	

Flex-grow

.container {
	display: flex;
}
.item:nth-child(4) {
	flex-grow: 1;
}
.item:nth-child(5) {
	flex-grow: 2;
}
	

Flex-shrink

Missing space?

.container {
	display: flex;
}
.item {
	/* flex-shrink: 1; */
}
	

Flex-shrink

.container {
	display: flex;
}
.item {
	flex-shrink: 0;
}
	

Flex-shrink

.container {
	display: flex;
}
.item {
	flex-shrink: 0;
}
.item:nth-child(7) {
	flex-shrink: 1;
}

	

Flex-shrink

.container {
	display: flex;
}
.item {
	flex-shrink: 0;
}
.item:nth-child(7) {
	flex-shrink: 1;
}
.item:nth-child(8) {
	flex-shrink: 2;
}
	

Flex-basis

Size before space attribution

.container {
	display: flex;
}
.item {
	flex-basis: 150px;
}
	

Flex-basis & flex-grow

.container {
	display: flex;
}
.item {
	flex-basis: 150px;
}
.item:nth-child(1) {
	flex-grow: 1;
}
	

Flex-basis & flex-shrink

.container {
	display: flex;
}
.item {
	flex-basis: 150px;
	flex-shrink: 0;
}
.item:nth-child(5) {
	flex-shrink: 1;
}
	

Min-width & max-width

.container {
	display: flex;
}
.item {
	flex: 1 0 150px; // flex-grow flex-shrink flex-basis
}
.item:nth-child(2) {
	min-width: 250px;
}
.item:nth-child(4) {
	max-width: 50px;
}
	

Use cases

h3 {
	display: flex;
	align-items: center;
}
h3::before,
h3::after {
	content: "";
	border-bottom: solid #000032 1px;
	flex-grow: 1;
}
				

Lorem ipsum
Dolores
				

.media {
  display: flex;
}
.media-body {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}
.media-image {
  flex-shrink: 0;
}
.media-name {
  flex: 1 0 auto; // flex-grow flex-shrink flex-basis
}
.media-text {
  flex: 1 0 100%; // flex-grow flex-shrink flex-basis
}
			          

form {
	display: flex;
}
input[type="email"] {
	flex-grow: 1;
}
								

Now let's challenge designers!