Skip to content

Instantly share code, notes, and snippets.

@wwex
Created June 11, 2018 11:33
Show Gist options
  • Save wwex/6d35c105e9e6428211edfc05cae6fb2b to your computer and use it in GitHub Desktop.
Save wwex/6d35c105e9e6428211edfc05cae6fb2b to your computer and use it in GitHub Desktop.
[CSS - FLEX] #css #flex #flexbox
css_flex_container {
display: flex;
/* Direction of the flex container */
flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;
/* Wraps elements if no space */
flex-wrap: nowrap;
flex-wrap: wrap;
flex-wrap: wrap-reverse;
/* Distribute along main axis */
justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify-content: space-between;
justify-content: space-around;
/* Distribute along cross axis */
align-items: stretch;
align-items: flex-start;
align-items: flex-end;
align-items: center;
align-items: baseline;
/* Distribute the space in between rows along cross axis */
align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-between;
align-content: space-around;
align-content: stretch;
}
css_flex_item {
/* Align single item - overrides container's align-items */
align-self: flex-start;
align-self: flex-end;
align-self: center;
align-self: stretch;
/* Specify order at which items are displayed (from lowest to highest) */
order: 0;
order: 1;
/* Define size of the elements */
/* flex: grow, shrink, basis; */
flex: 2, 1, 200px;
}
/* Different screen sizes */
@media screen and (max-width: 920px) {
}
@media screen and (max-width: 600px) {
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment