들어가며
안녕하세요! 웹 개발에 관심이 있는 여러분들을 위해 오늘은 display:flex에 대해 이야기해보겠습니다. 최근에는 많은 웹사이트에서 적용되고 있는 display:flex는 웹 페이지의 레이아웃을 다룰 때 아주 유용합니다. 복잡한 CSS를 사용하지 않고도 몇 줄의 코드로 유연하고 세련된 레이아웃을 구현할 수 있습니다. 그렇다면 display:flex의 말줄임해몽에 대해 알아볼까요?
display:flex란 무엇인가?
display:flex는 CSS의 하나로, 유연하게 요소들을 배열하고 정렬할 수 있는 방법을 제공합니다. 기존의 float나 inline-block으로는 어렵거나 번거로웠던 레이아웃 작업을 쉽게 처리할 수 있습니다. flex 컨테이너를 만들고 해당 컨테이너 내부의 아이템들을 유연하게 배치할 수 있습니다. flex 컨테이너는 부모 요소에 적용하고, 컨테이너 내부에는 flex 아이템들을 넣어 레이아웃을 설정합니다.
flex 컨테이너 및 아이템 설정하기
1. flex-direction
첫 번째로 flex-direction 속성은 flex 아이템들의 배치 방향을 결정합니다. 기본 값은 "row"로서, 왼쪽에서 오른쪽 방향으로 아이템들이 배치됩니다. 이외에도 "column", "row-reverse", "column-reverse" 등 다양한 값을 적용하여 요소들을 배치할 수 있습니다.
display: flex;
flex-direction: row; /* 기본값 */
flex-direction: column;
flex-direction: row-reverse;
flex-direction: column-reverse;2. justify-content
justify-content 속성은 flex 아이템들을 가로 방향으로 정렬하는 방법을 결정합니다. 기본 값은 "flex-start"로서, 왼쪽으로 정렬됩니다. "flex-end", "center", "space-between", "space-around" 등의 값으로 아이템들을 정렬할 수 있습니다.
display: flex;
justify-content: flex-start; /* 기본값 */
justify-content: flex-end;
justify-content: center;
justify-content: space-between;
justify-content: space-around;3. align-items
align-items 속성은 flex 아이템들을 세로 방향으로 정렬하는 방법을 결정합니다. 일반적으로 아이템들의 높이가 동일한 경우 사용하며, "flex-start", "flex-end", "center", "baseline", "stretch" 등의 값으로 아이템들을 정렬할 수 있습니다.
display: flex;
align-items: flex-start; /* 기본값 */
align-items: flex-end;
align-items: center;
align-items: baseline;
align-items: stretch;4. flex-wrap
flex-wrap 속성은 flex 아이템들이 한 줄에 모두 배치되지 않을 때의 동작을 설정합니다. 기본 값은 "nowrap"으로서, 행이 넘칠 경우 줄바꿈이 되지 않고 아이템들이 압축되어 표시됩니다. "wrap", "wrap-reverse" 값을 사용하여 행을 넘칠 경우 줄바꿈 처리를 할 수 있습니다.
display: flex;
flex-wrap: nowrap; /* 기본값 */
flex-wrap: wrap;
flex-wrap: wrap-reverse;flex 아이템에 추가적인 설정
1. order
order 속성은 flex 아이템들의 순서를 변경하여 배치하는 것을 가능하게 합니다. 기본 값은 0이며, 작은 값을 가지는 아이템일수록 앞에 배치됩니다.
order: 0; /* 기본값 */
order: 1;2. flex-grow
flex-grow 속성은 남은 공간을 flex 아이템들이 얼마나 크게 차지할지 결정합니다. 기본 값은 0이며, 1로 설정할 경우 남은 공간을 균등하게 나눠 가집니다.
flex-grow: 0; /* 기본값 */
flex-grow: 1;3. flex-shrink
flex-shrink 속성은 flex 아이템들이 얼마나 줄어들 수 있는지 결정합니다. 기본 값은 1이며, 0으로 설정할 경우 줄어들지 않습니다.
flex-shrink: 1; /* 기본값 */
flex-shrink: 0;4. flex-basis
flex-basis 속성은 flex 아이템들의 초기 크기를 설정합니다. 기본 값은 "auto"로서, 아이템들의 컨텐츠 크기로 설정됩니다. 단위를 직접 지정하여 크기를 설정할 수 있습니다.
flex-basis: auto; /* 기본값 */
flex-basis: 100px;열 번외 팁!
마지막으로 flex 속성들을 조합하여 다양한 레이아웃을 구현하는 다음의 예제를 살펴보겠습니다.
예제 1 - Media Objects
여기서는 이미지와 텍스트를 함께 보여주는 Media Objects 스타일을 구현하는 예제입니다.
<div class="media">
<img src="example.jpg" alt="Example Image">
<div class="media-body">
<h4 class="media-heading">Example Heading</h4>
<p>Example description text.</p>
</div>
</div>
.media {
display: flex;
align-items: center;
}
.media img {
flex: 0 0 100px;
margin-right: 16px;
}
.media-body {
flex-grow: 1;
}결론
이제 display:flex에 대해 간단하게 알아보았습니다. flex를 사용하면 웹 개발에서 레이아웃 작업이 더욱 손쉬워집니다. 다양한 속성을 조합하여 효과적인 레이아웃을 구성할 수 있으며, 반응형 디자인에도 적합합니다. 이번 글이 flex를 활용한 웹페이지 개발에 도움이 되었기를 바랍니다!