Skip to content

Instantly share code, notes, and snippets.

@sebastiano-guerriero
Created July 25, 2018 08:33
Show Gist options
  • Save sebastiano-guerriero/9466c6a503cab779118fe932c5fae9d2 to your computer and use it in GitHub Desktop.
Save sebastiano-guerriero/9466c6a503cab779118fe932c5fae9d2 to your computer and use it in GitHub Desktop.
.flex {
display: flex;
.align-center {
margin: auto;
align-self: center;
}
.align-left {
margin-right: auto;
align-self: center;
}
.align-right {
margin-left: auto;
align-self: center;
}
.align-x-center {
margin-right: auto;
margin-left: auto;
}
.align-x-left {
margin-right: auto;
}
.align-x-right {
margin-left: auto;
}
.align-y-center {
align-self: center;
}
.align-y-top {
align-self: flex-start;
}
.align-y-bottom {
align-self: flex-end;
}
}
@RTAndrew
Copy link

Great job
Flex utilities is something I am missing after using Foundation.
And this solves it.

Thank you.

@hahuaz
Copy link

hahuaz commented Apr 21, 2019

that's neat. thanks.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment