728x90
왜 flex를 사용하는가?
전에 레이아웃 구성할 때 float을 알려드렸는데, 앞으로는 브라우저 이슈들이 개선되어 가까운 미래에 flexbox 방식을 즐겨 쓰는 날이 올 것 입니다. 아직은 최신 브라우저들에서만 실행되지만 곧 일어날 변화들을 위해 flex 방식을 알아보겠습니다.
flex layout
요소들이 포함된 큰 박스에 flex를 선언하고, 안에 있는 요소들에게는 유연하게 배치하는 속성들을 부여하여
레이아웃을 잡는 것을 말합니다.
flex를 선언은 아래와 같습니다.
dispaly: flex;
flex-direction
자식요소를 나열하는 뱡향을 지정하는 속성입니다.
부모요소에게 지정합니다.
| 속성 값 | 속성 설명 |
| column | 위에서 아래로 나열 |
| column-reverse | 아래에서 위로 나열 |
| row(기본값) | 좌측에서 우측으로 나열 |
| row-reverse | 우측에서 좌측으로 나열 |
justify-content
공간이 남을 때, 즉 flex-grow: 0;일 때 자식 요소들을 가로 정렬하는 속성입니다.
| 속성 값 | 속성 설명 |
| flex-start(기본값) | 시작쪽으로 정렬(보통 왼쪽, flex-direction: row-reverse일 때는 오른쪽) |
| flex-end | 끝쪽으로 정렬(보통 오른쪽, flex-direction: row-reverse일 때는 오른쪽) |
| center | 중앙으로 정렬 |
| space-between | 양쪽으로 정렬 |
| space-around | 요소 좌우 동일 간격 |
flex-wrap
flex 자식 요소들의 줄바꿈 방식을 지정하는 속성입니다.
| 속성 값 | 속성 설명 |
| wrap | 자식 요소들이 많으면 다음 줄로 넘침 |
| nowrap (기본) | 자식 요소들이 많아도 한줄 안에 배치됨 |
| wrap-reverse | 자식 요소들이 많으면 다음 위 줄로 넘침 |
align-items
자식 요소들을 세로 정렬하는 속성입니다.
| 속성 값 | 속성 설명 |
| flex-start | 시작쪽으로 정렬(보통 위쪽, flex-direction: column-reverse일 때는 아래쪽) |
| flex-end | 끝 쪽으로 정렬(보통 아래쪽, flex-direction: column-reverse일 때는 위쪽) |
| center | 세로 중앙 정렬 |
| baseline | 글자의 baseline 기준으로 정렬 |
| stretch(기본값) | 부모 요소의 세로 크기를 따라 확장됨 |
flex 예제
전에는 float를 사용해서 콘텐츠 부분을 왼쪽 위로 올렸는데, 오늘은 flex 방식을 사용해서 올려보겠습니다.
다음은 flex를 사용하기 전 레이아웃입니다.
보시다 싶이 콘텐츠가 아래 내려가 있는데 flex를 사용해서 올려보겠습니다.
#main {
width: 1200px;
display: flex;
}저는 메인 부분 안에서 세 부분으로 나눴으므로 부모 요소인 메인에게 flex를 사용했습니다.
그럼 float을 사용한것과 같이 콘텐츠 요소들이 올라간 것을 확인 할 수 있습니다.
오늘은 이상 flex 사용법에 대해 알아봤습니다.