[TIL] CSS의 Flex(Flexible Box)의 특징과 속성

css logo

1. Flex 란.

◎ 레이아웃을 수평구조로 쌓이게 할 때 사용한다.

※등장하기 전 에는 인라인 속성을 이용해 수직, 수평 정렬에 대체 방법을 사용하였는데 이는 차선책일 뿐

flex가 나온 후로부터 레이아웃을 더 쉽게 구성할 수 있다.

2. 변화.

과거에는 float 속성을 이용하여 수평화 하는 작업을 진행하였다.

float html

float css

float browser

하지만 현재에는 flex를 사용하여 더 간단하게 수평의 레이아웃을 구현할 수 있다.

flex css

flex browser

3. flex와 inline-flex의 차이점

3-1. display:flex -> container가 수직으로 쌓임(block 요소와 같음.)

display: flex 일 경우. 

3-2. display:inline-flex -> container가 수평으로 쌓임(inline 요소와 같음)

display: 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: nowrap; browser (브라우저 크기를 줄이면 item(width: 150px로 설정) 크기도 줄어드는 현상을 볼 수 있다.)

• flex-wrap: wrap; 으로 값을 설정하면 줄 바꿈이 된다.

flex-wrap:wrap: browser (브라우저 크기를 줄이면 item(width: 150px로 설정)의 너비가 안되면 줄바꿈이 되는 현상을 볼수 있다. )

 

4-1-2. justify-content

• 주 측의 정렬 방법을 설정한다.

justify-content: flex-start

justify-content: flex-end;

justify-content: center;

justify-content: space-between;

justify-content: space-around;

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:center: 

align-items:center; css

• align-items: baseline 은 문자열의 영향을 받는다.

align-items:baseline; css

4-2. items에 사용되는 속성

• order

• flex

• align-self 등

4-2-1. order

• item의 순서를 설정한다.

• item에 숫자를 지정하고 숫자가 클수록 순서가 밀린다.

• 음수를 허용한다.

• html 구조와 상관없이 순서를 변경할 수 있다.

• 기본값은 0

• order 값이 같을 때는 html 구조적으로 접근한다.

order 속성 css

order 속성 browser

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 속성보다 우선한다.

align-self 속성 css

align-self 속성 browser

5. 느낀 점.

◎ flex... 어렵다... 예전에는 float를 많이 사용했지만, flex 가 있다는 걸 알고 써야 할 거 같은 느낌이 들어서

공부를 했는데.. 생각보다 많은 속성과 값들이 있다.

container와 items의 속성들도 각각 다르고 flex를 상황에 잘 맞게 사용해야 할거 같다.

자기소개 페이지에 flex를 사용할 예정인데 뭔가.. 반응형 제작할 때 좋을 듯..? 하다

개념을 한번 공부했으니 이제 실습을 통해 flex와 좀 더 친해져야 할 단계인 거 같다 flex~