Skip to content

Instantly share code, notes, and snippets.

@SilasRodrigues19
Created September 5, 2022 14:39
Show Gist options
  • Save SilasRodrigues19/44dc0cae4eb3a0273b71d9176fb32d1c to your computer and use it in GitHub Desktop.
Save SilasRodrigues19/44dc0cae4eb3a0273b71d9176fb32d1c to your computer and use it in GitHub Desktop.
Flexbox Froggy answers
.level1 {
display: flex;
justify-content: flex-end;
}
.level2 {
display: flex;
justify-content: center;
}
.level3 {
display: flex;
justify-content: space-around;
}
.level4 {
display: flex;
justify-content: space-between;
}
.level5 {
display: flex;
align-items: end;
}
.level6 {
dislay: flex;
justify-content: center;
align-items: center;
}
.level7 {
display: flex;
justify-content: space-around;
align-items: end;
}
.level8 {
display: flex;
flex-direction: row-reverse;
}
.level9 {
display: flex;
flex-direction: column
}
.level10 {
flex-direction: row-reverse;
justify-content: start;
}
.level11 {
display: flex;
flex-direction: column;
justify-content: end;
}
.level12 {
display: flex;
flex-direction: column-reverse;
justify-content: space-between;
}
.level13 {
display: flex;
justify-content: center;
align-items: end;
flex-direction: row-reverse;
}
.level14 {
order: 1;
}
.level15 {
order: -4;
}
.level16 {
align-self: end;
}
.level17 {
order: 3;
align-self: end;
}
.level18 {
display: flex;
flex-wrap: wrap;
}
.level19 {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.level20 {
display: flex;
flex-flow: column wrap;
}
.level21 {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}
.level22 {
display: flex;
flex-wrap: wrap;
align-content: flex-end;
}
.level23 {
display: flex;
flex-wrap: wrap;
flex-direction: column-reverse;
align-content: center;
}
.level24 {
display: flex;
justify-content: center;
align-content: space-between;
flex-flow: column-reverse wrap-reverse;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment