flex (flex-direction, justify-content, align-items, align-self, order)

flexbox

우리가 div를 여러개 만들고 일정한 간격을 두고 배치시키고 싶다면 display : inline-box로 지정 한 후 하나하나 margin-right를 주어 배치시킨다.

이렇게 어거지로 수동으로 맞추어도 화면이 작아지게되면 바로 깨져버린다. 이러한 문제를 해결하기 위해서 flex box라는 기술이 등장하였다.

 

flexbox의 특징

항상 붙어있는 부모가 자식의 위치를 움직일 수 있다.

.box들은 바로 위의 부모가 .wrapper이기에 wrapper의 display:flex가 적용이 된다 . 만약 .box들 위에 새로운 div를 하나 더 감싼다면 이제 이 .box들은 flex영향을 벗어난다.

flex-direction ( justify-content, align-items )

flexbox의 flex-direction의 기본값은 row이다. 맨 위의 사진 처럼 부모에 display:flex를 주었을 때 자식들은 가로로 배치되는 것을 확인할 수 있었다. 이 수평으로 된 아이템의 위치를 바꾸기 위해선 justiy-content를 사용하면 된다.

justify-content는 축(row일 때는 가로)에 있는 flex children의 위치를 변경한다. 여기서 축은 main axis라고도 할 수 있다. 

 

따라서 justify-content는 main axis방향으로 item을 옮기는 역할을 하는 것이다. 

 

flex-direction이 row일 때 main axis은 가로이다. 그리고 cross axis는 세로이다.

main axis 방향으로 item을 옮기기 위해서는 justify-contents를 사용한다.

croess axis 방향으로 item을 옮기기 위해서는 align-items를 사용한다.

flex-direction이 column일 때 main axis는 세로이다. 그리고 cross axis는 가로이다.

main axis 방향으로 item을 옮기기 위해서는 justify-contents를 사용한다.

croess axis 방향으로 item을 옮기기 위해서는 align-items를 사용한다.

 

여기서 주의해야할 점이 있다. flex-direction이 column일 때는 row일 때와 반대가 된다. main axis가 세로 cross axis가 가로가 되기 때문에 justify-content를 하면 item이 세로방향에 맞춰 정렬되고, align-items는 가로에 맞춰 정렬이 된다.

align-self

align-items는 flexbox안에 있는 모든 자식들에게 해당하는 것이고 align-self는 특정 자식 혼자 특정 위치로 이동시키는 것이다. 이걸 사용하기 위해선 flexbox에서 사용하는 것이 아니라 이동시키고 싶은 자식 item에서 지정해주어야 한다.

 

 

order

flexbox의 item들의 순서를 지정해주고 싶다면 align-self처럼 이동시키고 싶은 자식 item에 지정해주어야한다.

기본값은 order : 0으로 지정되어있다. 따라서 order 1로 지정해주면 제일 마지막에 위치하게 된다.