CSS - display(4) flexbox, container
오늘은 display 속성에서 사용되는 flexbox에 대해 알려드리겠습니다.
(편하게 flex라고 칭하겠습니다.)
flex는 앞에서 작성했던 grid와 비슷한 속성을 가지고 있습니다.
grid는 container로 감싸고 안에 item으로 구성이 되어 있습니다.flex도 grid와 똑같이 container와 item으로 구성되어 있고container을 구성하는 속성과 item을 구성하는 속성이 나누어져 있습니다.
오늘은 많은 속성 중 많이 사용되는 속성에 대해 알아보겠습니다.
flex는 css3에서 나온 방식으로 가장 최신의 방식이라고 할 수 있습니다.그만큼 활용도가 높고 간단하게 코드를 작성할 수 있습니다.
기존에 한 줄로 아이템을 배치하기 위해서는 float을 사용하거나display를 inline이나 inline-block을 설정했었습니다.지금도 물론 사용하고 있지만 이렇게 설정하시면 추후에 아이템의 정렬이나 배치에 대해서 코드를 작성할 때코드가 길어지거나 복잡하게 작성될 수 있기 때문에 flex를 사용하면서 그 단점을 보안할 수 있습니다.
사용 방식은 우선 display속성으로 flex를 지정하신 후row로 구성할 것인지 column으로 구성할 것인지 지정합니다.(지정하지 않으시면 기본값이 row로 구성됩니다.)
※주의하실 점은 flex는 상속되지 않기 때문에
꼭 배치하실 부모 태그에 작성하셔야 합니다.
이것을 지정하는 속성이 flex-direction을 사용하는데container 영역을 구성하는 속성입니다.
flex-direction의 속성 값으로는row, column, row-reverse, column-reverse가 있습니다.
row는 행, column은 열, row-reverse는 행에서 역순, column-reverse는 열에서 역순으로 row는 수평으로 배치, column은 수직으로 배치되는 것을 의미합니다.
이렇게 배치하는 방향을 지정했다면 다음으로는줄 바꿈에 대해 지정할 수 있습니다.
아이템을 배치하다 보면 화면의 넓이보다 더 많은아이템이 있을 수 있습니다.그럴 때 flex-wrap 속성을 사용하면 되는데 화면보다 아이템이 많을 때 줄 바꿈을 시켜주는 속성입니다.
속성 값으로는 nowrap, wrap, wrap-reverse가 있습니다.nowrap은 기본값으로 크기를 줄여 한 행에 배치할 수 있는 속성 값입니다.
wrap은 줄 바꿈이 되는 속성 값으로 만약 넓이보다 아이템이 많으면한 줄 뛰어서 왼쪽부터 배치되도록 지정할 수 있습니다.
wrap-reverse는 wrap과 반대로 아이템이 넓이보다 많으면넘치는 아이템을 위쪽으로 배치하는 속성 값입니다.
item과 관련된 속성으로는 정렬 방식이 있습니다.
좌측 정렬, 우측 정렬, 가운데 정렬, 상하 정렬과 같은
정렬 방식을 지정할 수 있는 속성을 사용할 수 있습니다.
먼저 소개해 드릴 속성은 justify-content 속성입니다.
이 속성은 아이템 정렬을 담당하는 속성으로
기본 속성 값은 flex-start로 왼쪽에서 오른쪽으로 배치되는 구성입니다.
그 밖에 flex-end, center, space-between, space-around 속성 값이 있습니다.
먼저 flex-end는 flex 영역에서 오른쪽 끝에서 시작되는 배치 구성입니다.
다음은 center로 가운데로 정렬하는 배치 구성입니다.
space-between은 좌우로 끝과 끝으로 배치되는 구성으로
빈 여백의 크기를 일정하게 조절이 되어 배치되는 구성입니다.
웹페이지 구성하면서 사용되는 상단에 내비게이션 영역에
사용될 수 있습니다.
마지막으로 space-around로 일정한 영역을 지정하여
그 영역에 중간에 위치하도록 만드는 속성입니다.
쇼핑몰 홈페이지와 같이
사진과 이미지를 배치할 때 사용할 수 있습니다.
justify-content 속성과 align-item 속성은 정말 유용하게 사용할 수 있기 때문에
꼭 알아두시면 좋겠습니다.
다음은 align-item 속성으로 container 영역과
수직 방향에서 정렬을 지정하는 속성입니다.
align-item 속성의 속성 값으로는
stretch, flex-start, flex-end, center, bace-line이 있습니다.
먼저 stretch는 기본 값으로 아이템의
크기와 상관없이 수직 방향으로 가득 채워주는 속성 값입니다.
다음은 flex-start로 아이템의 크기에 맞춰 위에 배치되는 속성 값입니다.
flex-end는 반대로 아래에 배치되고 center는 가운데로
bace-line은 아이템에서 메인 영역을 기준으로 배치하는 속성 값입니다.
오늘은 flexbox에서 container 영역에
관련된 속성에 대해 알아보았습니다.
앞에서도 설명드렸듯이 flexbox는 css3에서
나온 최신 기술이며 매우 유용하게 사용할 수 있습니다.
그렇기 때문에 flex에 대해 자세히 알아두시는 것이 중요하나
오늘은 기본적으로 꼭 사용되는 속성에 대해 우선적으로
설명드렸습니다.
꼭 flexbox에 대해 알아두시면 좋고
참고하실 점은 flexbox를 웹페이지에 사용하면
최신 기술이기 때문에 브라우저 중에 버전이 낮은 브라우저에는
적용이 안 되는 상황이 발생할 수 있습니다.
그 부분에 대해서는 다음 기회에 자세히 다뤄보도록 하겠습니다.
긴 글 읽어주셔서 감사합니다.
감사합니다!
'CSS > CSS display' 카테고리의 다른 글
| CSS - display(4) flexbox, item (0) | 2022.07.29 |
|---|---|
| CSS - display(3) grid와 item (0) | 2022.07.22 |
| CSS - display(2) grid와 container (0) | 2022.07.21 |
| CSS display (0) | 2022.07.20 |
댓글