[CSS] display : flex 정리

flex 정리

오늘은 주로 쓰는 display : flex 에 대해서 알아보겠습니다. 

display : flex 는 블록 요소를 정렬할 때 사용하며 부모요소에 속성을 주어 사용합니다.

 

지금 화면은 div 태그 안에 p태그 세개를 넣은 것입니다.. 보기와 같이 p태그는 블록요소이기 때문에 너비와 높이를 지정해도 부모태그의 한 줄씩 사용하는 것을 볼 수가 있습니다. 그럼 부모 요소에 display: flex를 줘서 어떤 변화가 있는지 확인해 보겠습니다. 

 display : flex 

 

 왼쪽div 태그에 display : flex 를 준 모습입니다. 세로로 정렬됐던 Box 들이 가로로 정렬 된것을 볼수 있습니다. 마치

inline-block 속성처럼 좌우로 나열 된 것을 주는 것을 볼 수 있습니다. display : flex 에는 여러가지 css 속성을 줄 수 있습니다. 자주 쓰이는 몇 가지들을 예시로 들어보겠습니다.

 

justify-content: center / space-between / space-around

center / space-between / space-around

 

justify-content : center => 태그들을 중앙 정렬 해줍니다.

justify-content  : space-between => 요소들 사이를 균일한 간격으로 배치합니다.

justify-content  : space-around => 요소들의 둘레를 균일하게 만들어 줍니다.

 

 

flex-direction : column 

 

flex-direction : column; 은 세로로 정렬하기 위해서 사용한다. 중심축이 X축에서 Y 축으로 바뀐것을 확인 할 수 있습니다.

flex-direction: column 후 justify-content : center를 적용하면 세로축을 기준으로 박스가 가운데 정렬이 된 것을 볼 수 있습니다. 마찬가지로 space-between 또는 space-around 의 속성을 주게 되면 세로축을 기준으로 정렬을 하게 되는 것을 알 수 있습니다.

 

align-items : center 

flex-direction : column; align-itmes : center; justify-content : center

 

위 화면은 flex-direction : column 으로 세로축 정렬 후 align-items : center 의 속성을 준 화면입니다.

이렇게 적용을 하게 되면 세로축을 기준으로 가운데 정렬이 됩니다. 여기서 가운데 정렬을 하게되면 위에서

언급한 바와 같이 justify-content : center 의 속성을 주면 됩니다.

 

flex-wrap : wrap

 

display : flex 는 기본적으로 자식 요소들을 가로로 배치 해줍니다. flex-wrap : wrap 은 자식태그의 너비 영역이 부모 밖을 넘어 갈 때 다음 줄로 밀어주는 속성입니다. 위에 사진 처럼 BOX3 이 부모의 너비를 넘기 때문에 그 다음 줄로 넘어간 것을 확인할 수 있습니다. (wrap의 반대 속성은 nowrap 입니다.)