[CSS - FLEX] #css #flex #flexbox

css_flexbox.css

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) {

}