CSS display:flex - 레이아웃 배치 CSS 플렉스 옵션
페이지 정보
조회 1,229회 작성일 22-04-06 13:21
본문
display:flex
레이아웃 배치 CSS 플렉스 옵션
홈페이지 CSS에서 정렬 배치를 하기 위해서, 이전에는 float, inline-block 같은 것을 사용했었다.
그런데 이건 잘 안 되는 경우도 많았고, 손이 많이 갔다.
그래서 대안으로 제시된 것이 flex(플렉스)와 Grid(그리드)다. 그 중에서 플렉스에 대하 정리한다.
display:flex - 레이아웃 배치 CSS 플렉스 옵션
display:flex 기본 구조
바깥을 감싸는 div가 있고, 그 안에 아이템 div가 있는 상태에서 지정한다. 내부의 요소를 배치하는 것이니 말이다.
일일이 간격 조절을 해 주는 것이 아니라, 자동으로 레이아웃이 구성된다는 뜻이다. 물론 수정 조절도 가능하다.
예를 들어, html을 아래와 같이 했다면...
[code]
<div class="flexcontainer">
<div class="itemp01">첫 요소</div>
<div class="itemp02">둘째 요소</div>
<div class="itemp03">세째 요소</div>
</div>
[/code]
아래처럼 CSS스타일을 한 번만 주면 알아서 배치를 해주니 정말 편한 기능이다. 바깥 div에 아래처럼 스타일을 주면, 내부에 들어 있는 아이템들이 자동 레이아웃이 된다.
[code]
<style type="text/css">
.flexcontainer { display:flex; }
</style>
[/code]
이렇게 하면 여러 개의 float를 쓰지 않아도 알아서 레이아웃 정렬이 된다.
display 플렉스 끼리의 레이아웃
아이템(요소)이 들어 있는 바깥 div가 있을 때, 이 큰 div들을 정렬을 설정하는 것이다.
[code]
<style type="text/css">
.flexcontainer { display:flex; } /* 한 줄에 하나씩 */
.flexcontainer { display:inline-flex; } /* 글자처럼 옆으로 */
</style>
[/code]
여러 개의 바깥 div를 세로로 내려가게 할 것인지, 가로로 늘어 놓을 것인지를 결정하는 방법이다.
- display:flex 면 세로로 나열된다.
- display:inline-flex 면 가로로 나열된다.
CSS 디스플레이 flex의 내부 정렬
바깥 div 정렬을 할 수 있으니, 안에 들어 있는 내부 아이템 정렬도 가능할 것이다. 아래처럼 하면 된다.
[code]
<style type="text/css">
.flexcontainer { display:flex; flex-direction:row; } /* 가로 방향 배치 */
.flexcontainer { display:flex; flex-direction:column; } /* 세로 방향 배치 */
</style>
[/code]
가로 방향일 경우 왼쪽에서 오른쪽으로 배치된다. 세로는 당연히 위에서 아래다.
- flex-direction:row 면 가로 오른쪽으로 정렬
- flex-direction:column 면 세로 아래로 정렬
만약, 거꾸로 반대쪽으로 향하길 바란다면 이렇게 추가로 reverse를 붙여 주기만 하면 된다.
flex-direction:row-reverse 면 가로로 왼쪽방향
flex-direction:column-reverse 면 세로로 위쪽방향
display:flex 줄바꿈 옵션
가로로 정렬할 경우, 계속 오른쪽으로 가게 할 것인지, 줄 끝까지 가면 글자처럼 아래로 내려가게 줄바꿈 할 것인지도 정할 수 있다.
- flex-wrap:nowrap 면 줄바꿈 없이 계속 이어진다.
- flex-wrap:wrap 면 줄바꿈되며 여러 줄이 된다.
(만약, 마지막에 -reverse를 붙이면 아래에서 위로 줄바꿈이 된다.)
display 플렉스 CSS의 내부 가로 레이아웃
이전에는 div 안의 div들을 레이아웃할 때 float를 사용한 뒤, margin 등을 사용해서 다시 간격 조절까지 했었다.
그러나 display:flex는 이것도 자동으로 해 준다.
[code]
<style type="text/css">
.flexcontainer { display:flex; justify-content:flex-start; } /* 왼쪽에 문장 정렬 */
.flexcontainer { display:flex; justify-content:center; } /* 가운데 중앙 정렬 */
.flexcontainer { display:flex; justify-content:flex-end; } /* 오른쪽에 문장 정렬 */
.flexcontainer { display:flex; justify-content:space-around; } /* 좌우 끝에 여유 간격을 둔 후 자동 간격 배치 */
.flexcontainer { display:flex; justify-content:space-between; } /* 좌우 끝에 딱 붙인 후 자동 간격 배치 */
</style>
[/code]
즉 justify-content는 컨텐츠를 가로 정렬하는 플렉스 옵션이다.
CSS 배치 flex의 내부 줄간격 레이아웃
이전에는 div 안의 div들을 레이아웃할 때 margin-top, margin-bottom, 여기에다가 text-align와 line-height까지 사용했었다.
그러나 display:flex는 이것도 자동으로 해 준다.
[code]
<style type="text/css">
.flexcontainer { display:flex; align-content:stretch; } /* 바깥 div의 세로 크기에 맞게 내부 아이템의 세로 길이를 늘려서 꽉차게 한다. */
.flexcontainer { display:flex; align-content:flex-start; } /* 시작을 위쪽에 붙여서 시작하므로 아래쪽에 공간이 생긴다. */
.flexcontainer { display:flex; align-content:flex-end; } /* 시작을 아래쪽에 붙여서 시작하므로 위쪽에 공간이 생긴다. */
.flexcontainer { display:flex; align-content:center; } /* 위와 아래에 자동으로 공간을 두며 세로 가운데 정렬이 된다. */
.flexcontainer { display:flex; align-content:space-between; } /* 위와 아래에 바짝 붙여서 줄바꿈을 하므로 중간에 공간이 생긴다. */
.flexcontainer { display:flex; align-content:space-around; } /* 위의 center와 space-between를 동시에 한다. 테두리쪽에 공간을 만든 후 세로 중앙 정렬이 된다. */
</style>
[/code]
즉 align-content는 컨텐츠를 세로 정렬하는 플렉스 옵션이다.
display:flex 사용 방법 추가
그 외에 알아둘만한 편리한 속성 옵션도 있다.
[code]
<style type="text/css">
flex-wrap:wrap; // 자동 줄바꿈
flex-wrap:wrap-reverse; // 역박향으로 줄바꿈
flex-wrap:nowrap; // 줄바꿈 금지
flex:auto; // 자동으로 아이템 크기 조절
</style>
[/code]
편리함과 주의사항
특히, 세로 중앙 가운데 정렬의 경우, 과거에는 자바스크립트 프로그래밍까지 동원해서 화면 가운데 정렬을 만들기도 했었다. [저작권법 표시] 원본 출처 : 키스세븐(www.kiss7.kr)
그러나 이제는 플렉시 기능만으로 CSS 레이아웃이 한 번에 정렬이 된다.
단, 오래된 익스플로러에서는 지원하지 않으므로 레이아웃이 깨질 수도 있으니, 브라우저별로 확인을 한 후 작업을 시작하는 것이 좋다.