flex기능은 css에서 레이아웃 설정시 요소들을 자동으로 정렬시켜주는 기능이다. 이를 잘 활용하면
사용하는 코드의 양을 크게 줄여줄 수 있다.
몇 가지 예시를 통해 가볍게 알아보자.
flex는 child가 아닌 parent element에 그 attribute와 value를 부여한다.
다음과 같이 구성된 웹 페이지가 있다고 하자.
<div id="header"> <h1>logo</h1> <ul> <li>menu</li> <li>menu</li> <li>menu</li> </ul> </div>
여기서 우선 가장 상위 element인 #header를 flex를 활용해 스타일링해보자.
#header { width:1200px; height: 100px; display: flex; /* parent element인 #header에서 child들의 위치를 조정한다. */ justify-content: space-between; /* 양쪽 끝 정렬의 의미하는 flex */ }
여기까지 하고 html파일을 브라우저로 열어보면 별다른 padding이나 margin, float을 주지 않았음에도
요소들이 양쪽 끝으로 정렬되었음을 알 수 있다.
child element들을 parent elemnt 내부의 새로 중앙에 오게 하고 싶으면 다음을 추가한다.
#header { align-items: center; }
이제 리스트들을 일정한 간격을 주가 배치해보자.
li들의 parent element는 ul이므로 ul을 다음과 같이 스타일링하자.
#header > ul { display: flex; width:400px; height: 80px; justify-content:space evenly /*child 요소들을 일정한 간격으로 벌어지게 한다. */ align-items: center; }
이 정도 간단한 몇 가지만 알아도 margin과 padding등에 사용할 코드와 시간을 많이 아낄 수 있다.
