[TIL] CSS의 Flex(Flexible Box)의 특징과 속성
1. Flex 란.
◎ 레이아웃을 수평구조로 쌓이게 할 때 사용한다.
※등장하기 전 에는 인라인 속성을 이용해 수직, 수평 정렬에 대체 방법을 사용하였는데 이는 차선책일 뿐
flex가 나온 후로부터 레이아웃을 더 쉽게 구성할 수 있다.
2. 변화.
과거에는 float 속성을 이용하여 수평화 하는 작업을 진행하였다.
하지만 현재에는 flex를 사용하여 더 간단하게 수평의 레이아웃을 구현할 수 있다.
3. flex와 inline-flex의 차이점
3-1. display:flex -> container가 수직으로 쌓임(block 요소와 같음.)
3-2. display:inline-flex -> container가 수평으로 쌓임(inline 요소와 같음)
4. container와 items
◎ container은 items을 감싸는 부모 요소이며, 각 items을 정렬하기 위해선 container가 필수로 존재하여야 한다.
4-1. contianer에 사용되는 속성
-
dispaly
-
flex-wrap
-
justify-content
-
align-items
4-1-1. flex-wrap
-
items의 여러 줄 묶음을 설정한다.
-
container 안의 item의 가로너비는 컨테이너의 너비에 따라 가변 할 수 있다.
-
nowrap(default 값) 은 무조건 한 줄로 나타남
-
flex-wrap: wrap; 으로 값을 설정하면 줄 바꿈이 된다.
4-1-2. justify-content
-
주 측의 정렬 방법을 설정한다.
4-1-3. align-content
-
교차 축의 정렬방법
-
flex-wrap 속성을 통해 items가 여러 줄이고 여백이 있을 경우에만 사용할 수 있다.
-
justify-content와 비슷한 의미로 다른 점은 align-content는 교차! 축이다.
4-1-4. align-items
-
교차 축에서 items의 정렬 방법을 설정한다.
-
items가 한 줄일 경우 사용한다.
-
align-items:center는 보통 container 안에 있는 Item을 중앙 정렬할 때 많이 사용한다.
- align-items: baseline 은 문자열의 영향을 받는다.
4-2. items에 사용되는 속성
-
order
-
flex
-
align-self 등
4-2-1. order
-
item의 순서를 설정한다.
-
item에 숫자를 지정하고 숫자가 클수록 순서가 밀린다.
-
음수를 허용한다.
-
html 구조와 상관없이 순서를 변경할 수 있다.
-
기본값은 0
-
order 값이 같을 때는 html 구조적으로 접근한다.
4-2-2. flex-grow
-
container 안의 item이 가지는 증가 너비를 설정하는 개념이다.
-
기본값은 0
4-2-3. flex-basic
-
item 요소의 기본 너비를 설정.
-
flex-grow의 증가 너비 비율에 상관하지 않는다.
-
기본값은 auto
4-2-4. align-self
-
교차 축에서 개별 item의 정렬 방법을 설정한다.
-
일부 item만 정렬 방법을 변경하려고 할 경우 사용한다.
-
align-items 속성보다 우선한다.
5. 느낀 점.
◎ flex... 어렵다... 예전에는 float를 많이 사용했지만, flex 가 있다는 걸 알고 써야 할 거 같은 느낌이 들어서
공부를 했는데.. 생각보다 많은 속성과 값들이 있다.
container와 items의 속성들도 각각 다르고 flex를 상황에 잘 맞게 사용해야 할거 같다.
자기소개 페이지에 flex를 사용할 예정인데 뭔가.. 반응형 제작할 때 좋을 듯..? 하다
개념을 한번 공부했으니 이제 실습을 통해 flex와 좀 더 친해져야 할 단계인 거 같다 flex~