Skip to content

Instantly share code, notes, and snippets.

@paveltimofeev
Created October 26, 2021 17:37
Show Gist options
  • Save paveltimofeev/a48b0d87cc4f3afe305523bfc8fc8c66 to your computer and use it in GitHub Desktop.
Save paveltimofeev/a48b0d87cc4f3afe305523bfc8fc8c66 to your computer and use it in GitHub Desktop.
auto-layout.css
.l-vertical { display: flex; flex-direction: column; }
.l-horizontal { display: flex; flex-direction: row; }
.l-content-packed { justify-content: flex-start;}
.l-content-space-between { justify-content: space-between;}
.l-content-top-left {}
.l-content-top-center {}
.l-content-top-right {}
.l-content-center-left {}
.l-content-center-center {}
.l-content-center-right {}
.l-content-bottom-left {}
.l-content-bottom-center {}
.l-content-bottom-right {}
.l-padding-none {}
.l-padding-sm {}
.l-padding-md {}
.l-padding-lg {}
.l-padding-8 { padding: 8px; }
.l-padding-16 { padding: 16px;}
.l-padding-24 { padding: 24px; }
.l-padding-8lr {}
.l-padding-16lr {}
.l-padding-24lr {}
.l-padding-8tb {}
.l-padding-16tb {}
.l-padding-24tb {}
.l-gap-none {}
.l-gap-sm {}
.l-gap-md {}
.l-gap-lg {}
.l-gap-2 {}
.l-gap-4 {}
.l-gap-8 {}
.l-gap-16 {}
.l-gap-24 {}
.l-vertical .l-fill-container-vertically { flex: 1; }
.l-vertical .l-fill-container-horizontally { width: 100% !important; }
.l-horizontal .l-fill-container-vertically { height: 100% !important; }
.l-horizontal .l-fill-container-horizontally { flex: 1; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment