Flex box

Flex box는 하드코딩되어 창의 크기를 줄이거나 늘릴때 정렬이 어긋나버리는 단점이 없는 flexible한 box이다.

display: flex;

    flex-direction: row;

 

flex-direction을 row ( 기본값 ) 로 가면 flex box의 주축이 가로로 배열된다. 위 값을

 

flex-direction : row-reverse ;

 

로 바꾸면 배열이 반대로 된다.

 

flex-direction : column ; 

 

로 바꾸면 배열이 가로가 아니라 세로로 되는데, 부모값인 container의 세로 배열이 된다. 

 

justify-content: center;

 

코드는 Flex 박스의 시작인 주축의 공간 배분을 정한다. 기본값은 flex-start 이며 center, flex-end

space-between로 flex box의 맨 왼쪽 오른쪽 여백을 없애고 box 사이 여백을 주며

space-around는 flex box의 모든 여백을 같게 준다.

flex-direction이 row 이며 justify content가 flex-start면 box 방향이 가로이기에  왼>오로 배분이되며

flex-direction이 column 이며 justify content가 end-flex면 box 방향이 세로이기에 하 > 상으로 배분이 된다.

 

flex-wrap: wrap;

 

코드는 주축 ( main axis )의 교차축 ( corss axis ) 방향으로 flex box을 추가해 넣어준다. ( 줄바꿈 )

주축의 배열은 flex-direction 으로 정해지므로 위 코드처럼 row인경우 주축이 좌 > 우 이므로 교차축은 상 > 하 이므로

flex box가 아래로 더 생기며 반대로 column일 경우 교차축은 좌 > 우 이므로 좌 > 우로 flex box가 생긴다.

좌 > 우 or 우 > 좌는 justify content에 따라 결정된다.

 

align-items: flex-end; 

 

코드는 주축이 아닌 교차축의  공간배분을 정한다. baseline은 공간배분을 box 안의 font size에 맞춰 분배하는 코드다.

 

위 코드들을 이용하여 

 

#container {

    background-color: #003049;

    width: 90%;

    height: 500px;

    margin: 0 auto;

    border: 5px solid #003049;

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    flex-wrap: wrap;

    align-items: flex-end;

}

 

같은 코드를 짠다면 1~7 순서의 box가 있다고 가정할시

 

--------------------------

                1   4

                2   5       7

                3   6 

-------------------------- 

위와 같은 코드가 나온다. 

flex-direction 이 column이기 때문에 주축이 세로방향이 되고, 

justify-content 가 flex-start기 때문에 공간배열이 상 > 하 가 되어 위에서 아래로 box의 숫자가 커진다.

flex-wrap은 wrap으로 줄바꿈을 했기때문에 주축인 세로방향의 반대인 교차축의 가로방향으로 줄바꿈을 하고

이 교차축의 align-items가 flex-end이므로 교차축은 우 > 좌 가 되어 box가 오른쪽에 붙었다.

align-content: center;

 

해당코드는 wrap된 box들의 사이의 공간배열을 정한다. wrap된 상태가 아니라면 작동하지 않는다.

위 같은 코드를 위 코드에 사용하면

 

--------------------------

            14

            257    

            36  

-------------------------- 

 

이 된다.