# flexbox

.container {
    display: flex;
    flex-direction : row // (default)
    justify-content: center;
    align-items: center;
}

.container {
    display: flex;
    flex-direction : column 
    justify-content: start;
    align-items: start;
}

.container {
    flex-direction: row-reverse;
}

.item {
    align-self : center;
    order: 1;
}

.container {
    // flexbox는 자식 width 무시하고 같은 줄에 위치시킴
    flex-wrap: nowarp; // default
    // 자식 width 유지 시킴, 줄 바꿈 됨
    flex-wrap: wrap;
    //자식 width 유지 + 돔 순서 바꿈 
    flex-wrap: wrap-reverse;
}

.container {
    aline-content : flex-start; //center, space-around
}

.item {
    flex-shrink : 1; // default
    flex-grow  : 0; // defualt
}

.container {
    flex-basis : 100px;
}

.container {
    height : 50vh;
    flex-basis : 30%;
}

.container {
    flex-flow : column wrap
}