css(16) flexable box layout (flex)

플렉서블 박스 레이아웃
 - 플렉스박스 혹은 플렉스라고 부르며 CSS3부터 나온 레이아웃 모델
 - 해당 요소의 display 속성을 설정함으로써 시작(dlsplay:flex, inline:flex)
 - 플렉스는 오직 플렉스 요소가 컨테이너 내부에서 어떻게 위치하는가만 정의하기 때문에 요소 내부의 스타일은                   평소처럼 동작한다

 1. flex-direction
    - 플렉스 컨테이너 내부에서 플렉스 요소가 배치될 방향을 설정
        ⓐ row : 기본값, 플렉스 아이템들은 왼쪽에서 오른쪽으로, 위에서 아래로 배치
        ⓑ row-reverse : 플렉스 아이템을 오른쪽에서 왼쪽으로 배치
        ⓒ column : 위에서 아래로
        ⓓ column-reverse : 아래에서 위로

 2. justify-content
    - 플렉스 아이템의 수평방향 정렬방식을 설정
        ⓐ flex-start : 기본설정
        ⓑ flex-end : 아이템을 뒤에서 배치
        ⓒ center : 아이템을 가운데서부터 배치
        ⓒ space-between : 요소들 사이에만 여유공간을 두고 배치
        ⓓ space-around : 요소 앞 뒤 사이에 모두 여유공간을 두고 배치

 3. align-items
    - 플렉스 아이템의 수직 방향 정렬방식 설정
    - 두 줄 이상을 가지는 플렉스 박스에 효과 설정 가능
        ⓐ flex-start : 위쪽배치
        ⓑ flex-end : 컨테이너 가장 아래쪽에 배치
        ⓒ center : 가운데 배치(다른 요소들과 어울려서 배치)
        ⓓ baseline : 기준선에 배치
        ⓔ stretch : 기본설정(플렉스 아이템의 높이가 컨테이너와 같이 변경된 뒤 연이어 배치되는 속성)

 4. flex-wrap
    - 더이상의 여유공간이 없을 때 요소의 위치를 다음줄로 넘길지 설정하는 부분
        ⓐ nowrap : 아이템이 다음 줄로 넘어가지 않고 아이템 너비를 자동으로 줄여 한 줄에 배치
        ⓑ wrap : 아이템이 여유공간이 없으면 다음 줄에 배치
        ⓒ wrap-reverse : 여유공간이 없으면 다음 줄로 넘어가 배치되지만 위쪽으로 배치된다

 5. align-content
    - flex-wrap 속성의 동작을 변경하는 속성
    - align-items와 유사하지만 아이템 대신 라인을 정렬한다
        ⓐ stretch : 기본
        ⓑ flex-start : 컨테이너 앞 쪽에 아이템을 모음
        ⓒ flex-end : 뒤
        ⓓ center : 가운데
        ⓔ space-between : 컨테이너에 고르게 분포
        ⓕ space-around : 고르게 분포하지만 약간의 공간이 있음

 

 

.flex{
    background-color: slateblue;
    width: 1300px;
    height: 400px;
    border-radius: 10px;
    display: flex;
    margin-bottom: 20px;
}

#row-reverse{
    flex-direction: row-reverse;

}

#column{
    flex-direction: column;
}

#column-reverse{
    flex-direction: column-reverse;


/* justify content 설정 */
#flex-end{
    justify-content: flex-end;
}

#center{
    justify-content: center;
    align-items: center;
/* >> flex의 속성을 복수로도 지정 가능하다 */
}

#between{
    justify-content: space-between;
    align-items: center;
}

#around{
    justify-content: space-around;
    align-items: center;
}


#start{
    align-items: flex-start;
}

#end{
    align-items: flex-end;
}

#stretch{
    속성 적용 시 높이값이 없어야 적용 가능
    align-items: stretch;
}

#nowrap{
    flex-wrap: nowrap;
}

#wrap{
    flex-wrap: wrap;
}

#wrap_reverse{
    flex-wrap: wrap-reverse;
}


/* align content */

#stretch{
    flex-wrap: wrap;
}

#between{
    align-content: space-between;
    flex-wrap: wrap;
}

#around{
    align-content: space-around;
    flex-wrap: wrap;
}


#flexstart{
    flex-wrap: wrap;
    align-content: flex-start;
}

#center{
    flex-wrap: wrap;
    align-content: center;
}

#flexend{
    flex-wrap: wrap;
    align-content: flex-end;
}

.item{
    background-color: crimson;
    color: aliceblue;
    width: 100px;
    /* height: 100px; */
    font-size: 24px;
    margin: 5px;
    text-align: center;
    line-height: 70px;
    margin-right: 50px;
}