02-7⠀CSS 플렉서블 박스 레이아웃 (flex box layout)

 

 

 

 

 

https://studiomeal.com/archives/197

https://heropy.blog/

1분 코딩 블르그와 헤로피님 블로그에서 참고 많이 했씁니다 감사합니당

 

 

 

 

 

 

 

< 그리드 레이아웃 grid layout >

사이트 전체 디자인이나 배열을 일관성있게 재배치 가능하게 하는 레이아웃

- 플렉서블 박스 레이아웃 flexible box layout (=flex box layout)

수직 / 수평 중 한쪽을 주축으로 정하고 박스를 배치

- CSS 그리드 레이아웃 css grid layout

수직 / 수평 상관없이 퍼즐 맞추듯 박스를 배치

 

 

 

 

< 플렉스 박스 레이아웃 flex box layout >

 

https://tympanus.net/codrops/css_reference/flexbox/

 

플렉스 항목 (flex item) 들을 감싸는 플렉스 컨테이너 (flex container)

수평방향인 주축 (main axis) 과 주축시작점, 주축끝점

수직방향인 교차축 (cross axis) 과 교차축시작점, 교차축끝점

으로 구성

 

 

ㅋㅋㅋㅋㅋㅋ오뎅꼬치 비유 지렸다

 

 

 

 

flex box layout 의 속성은 두가지로 분류할 수 있음

- flex container 에 적용하는 속성

- flex item 에 적용하는 속성

 

https://heropy.blog/2018/11/24/css-flexible-box/

 

 

 

 

< flex container > 에 적용하는 속성

 

 

플렉스 항목들을 묶은 부모요소 선택자 { display: 속성값; }

플렉스 컨테이너를 지정

컨테이너의 속성을 지정하는 것이지 아이템의 속성을 지정하는 것이 아님

(플렉스 아이템의 정렬 배치 등에는 직접적인 영향 x 뭔가 영향이 간다면 부모요소인 컨테이너에 부여된 속성에 따라 다 다름)

*속성값

display:flex;

플렉스 컨테이너를 블록요소로 만듬 (플렉스 아이템들은 인라인요소로 배치됨)

*이 display 속성은 직접적으로 플렉스 아이템의 배치를 지정하는 속성이 아님

플렉스 컨테이너의 배치를 지정하는 속성이며, 컨테이너와 컨테이너 사이의 관계를 지정하는 속성임

결과적으로 부모요소인 컨테이너를 블록요소로 만들다보니 자연스럽게 컨테이너안의 플렉스 아이템들이 인라인요소처럼 배치되는 것임

아이템들은 자신이 가진 width 값만큼씩만 너비를 차지하고, 높이는 컨테이너의 height 값에 따라 맞춰 늘어나거나 줄어듬

내가 잘못이해했나 책이랑 구글링정보랑 내용이 막 다달라 ㅅㅂ어케

 

 

block (플렉스 아이템들이 블록요소로 바뀜)

flex (플렉스 컨테이너가 블록요소로 바뀜) 해당 컨테이너의 height 값 지정 시, 위와 같이 아이템들이 인라인요소처럼 배치됨

 

 

display:inline-flex;

플렉스 컨테이너를 인라인 요소로 만듬

* inline-flex 속성 또한 플렉스 아이템의 배치 방식을 직접적으로 지정하는 것이 아님

그저 컨테이너와 컨테이너의 배치 방식을 지정하기 위해 존재하는 속성으로,

flex 속성과는 다르게 inline-flex 속성은 컨테이너 자체를 인라인 요소로 만들기때문에

자연스럽게 플렉스 아이템들도 인라인요소처럼 배치됨

(플렉스 아이템들이 인라인요소로 배치된 것 처럼 보이는 것이지, 플렉스 아이템들이 실제로 인라인 요소인지는 모름

때문에 플렉스 아이템들이 컨테이너 안에서 어떤식으로 배치되어야 하는지는 따로 직접 속성을 부여해야함)

 

 

 

 

 

 

 

부모선택자 { flex-direction: 속성값; }

flex item 의 주축 (main-axis) 의 방향을 지정하는 속성

*오뎅꼬치로 비유

*속성값

row (기본값) : 주축을 가로로 지정, 왼쪽에서 오른쪽으로 배치

row-reverse: 주축을 가로로 지정, 오른쪽에서 왼쪽으로 배치

column : 주축을 세로로 지정, 위에서 아래로 배치

column-reverse : 주축을 세로로 지정, 아래에서 위로 배치

 

 

 

 

 

 

*주축의 방향에 따라 교차축의 방향, 각 시작점과 끝점의 위치가 달라짐

 

주축 방향에 따라 달라지는 교차축의 방향

 

주축의 방향에 따라 달라지는 주축시작점과 주축끝점

 

주축의 방향에 따라 달라지는 교차축시작점과 교차축끝점

 

 

 

 

 

 

 

부모선택자 { flex-wrap: 속성값; }

플렉스 컨테이너의 너비보다 플렉스 아이템이 더 많을 경우 아이템을 줄바꿈 할건지 지정하는 속성

*속성값

nowrap (기본값) : 줄바꿈을 하지 않음 (넘치면 삐져나감)

wrap : 줄바꿈을 함 (lnline-block으로 배치한 요소와 비슷하게 동작)

wrap-reverse : 줄바꿈을 함 (시작점과 끝점을 바꾸어 역순으로 배치)

 

 

 

 

부모선택자 { flex-flow: 속성값; }

flex-direction 속성과 flex-wrap 속성을 한꺼번에 지정할 수 있는 속성

*속성값

띄어쓰기로 나란히 속성을 나열

flex-flow: row nowrap -기본값

 

 

 

 

 

 

부모선택자 { justify-content: 속성값; }

주축을 기준으로 플렉스 아이템을 정렬하는 방식을 지정하는 속성

*속성값

flex-start (기본값) : 주축의 시작점에 맞춰 아이템을 정렬

(flex-direction:row 일 때는 왼쪽, :column 일 때는 위쪽에 맞춰 정렬)

flex-end : 주축의 끝점에 맞춰 아이템을 정렬

(flex-direction:row 일 때는 오른쪽, :column 일 때는 아래쪽에 맞춰 정렬)

center : 주축의 중앙에 맞춰 아이템을 정렬

space-between : 아이템들의 사이에 균일한 간격을 만들어 정렬

space-around : 아이템들의 둘레에 균일한 간격을 만들어 정렬

space-evenly : 아이템들의 사이와 양 끝에 균일한 간격을 만들어 정렬

(IE, edge 에서는 지원 x)

 

 

 

 

 

 

부모선택자 { align-items: 속성값; }

교차축을 기준으로 플렉스 아이템을 정렬하는 방식을 지정하는 속성

*align-content 값이 기본값인 strech 일 경우에 해당

*속성값

stretch (기본값) : 플렉스 아이템의 높이가 교차축의 height 값에 따라 늘어남

flex-start : 교차축의 시작점에 맞춰 아이템을 정렬

(flex-direction:row 일 때는 위쪽, :column 일 때는 왼쪽에 맞춰 정렬)

flex-end : 교차축의 끝점에 맞춰 아이템을 정렬

(flex-direction:row 일 때는 아래쪽, :column 일 때는 오른쪽에 맞춰 정렬)

center : 교차축의 중앙에 맞춰 아이템을 정렬

baseline : 교차축의 문자 베이스라인에 맞춰 아이템을 정렬

 

 

 

 

 

 

 

부모선택자 { align-content: 속성값; }

교차축을 기준으로 플렉스 아이템을 정렬하는 방식을 지정하는 속성

*flex-wrap:warp; 일 시 = 플렉스 아이템이 줄바꿈되어 2줄 이상일 경우에 해당

*속성값

stretch (기본값) : 플렉스 아이템의 높이가 교차축의 height 값에 따라 늘어남

flex-start : 주축의 시작점에 맞춰 아이템을 정렬

(flex-direction:row 일 때는 왼쪽, :column 일 때는 위쪽에 맞춰 정렬)

flex-end : 주축의 끝점에 맞춰 아이템을 정렬

(flex-direction:row 일 때는 오른쪽, :column 일 때는 아래쪽에 맞춰 정렬)

center : 주축의 중앙에 맞춰 아이템을 정렬

space-between : 아이템들의 사이에 균일한 간격을 만들어 정렬

space-around : 아이템들의 둘레에 균일한 간격을 만들어 정렬

space-evenly : 아이템들의 사이와 양 끝에 균일한 간격을 만들어 정렬

(IE, edge 에서는 지원 x)

 

 

 

 

 

 

 

 

 

< flex item > 에 적용하는 속성

 

 

 

 

부모선택자 { order: 숫자; }

플렉스 아이템의 시각적 나열 순서를 결정

*속성값

작은 숫자일 수록 먼저 배치, 큰 숫자일 수록 나중에 배치, 음수 가능

*시작적 순서일 뿐, html 자체의 구조를 바꾸는 것이 아님

 

 

 

 

부모선택자 { flex-basis: 속성값; }

플렉스 아이템의 기본 너비를 지정하는 속성 (공간 배분 전)

*속성값

auto (기본값) : 해당 플렉스 아이템의 width 값과 같게 지정

(width 값 지정x 일 시 컨텐츠의 너비와 같게 지정)

content : 컨텐츠의 너비와 같게 지정

단위 : px, em 같은 단위 사용

(flex-basis:100px; 일 시, 100px 이 안되는 아이템들은 100px 로 늘어나고, 100px 보다 큰 아이템은 그대로 유지됨)

백분율 : 컨텐츠의 너비값을 기준으로 백분율 지정

*지정한 아이템의 너비를 벗어난 줄바꿈은 word-wrap:break-word; 속성 적용

 

 

https://www.freecodecamp.org/news/flex-basis-property-in-flexbox/

 

 

 

 

부모선택자 { flex-grow: 속성값; }

플렉스 아이템의 너비를 유연하게 늘릴 때

*속성값

0 (기본값) : 늘리지 않음

숫자 : 아이템들의 flex-basis 를 제외한 여백부분을 숫자의 비율로 나누어 가짐

해당 플렉스 아이템이 유연한 (flexible) 박스로 변하고 원래의 크기보다 커지며 빈공간을 메움

 

/* 1:2:1의 비율로 세팅할 경우 */
.item:nth-child(1) { flex-grow: 1; }
.item:nth-child(2) { flex-grow: 2; }
.item:nth-child(3) { flex-grow: 1; }

flex-basis 를 제외한 여백의 비로 생각할 시, 각 아이템의 flex-grow 값이던 숫자

1:2:1 임

 

 

 

 

 

부모선택자 { flex-shrink: 속성값; }

플렉스 아이템의 너비를 유연하게 줄일 때

*속성값

1 (기본값) : 해당 플렉스 아이템이 유연한 (flexible) 박스로 변하고 flex-basis 보다 작아질 수 있음

0 (고정크기는 width 값으로 지정) : 해당 플렉스 아이템은 줄어들지 않고 width 값 그대로 유지

 

 

 

 

부모선택자 { flex: 속성값; }

flex-grow / flex-shrink / flex-basis 속성을 한꺼번에 나열 가능

*속성값

flex: 1;

flex-grow 값만 1로 지정 (나머지는 기본값 지정 flex-shrink:1; flex-basis:0;)

flex: 1 1 auto;

flex-grow: 1; flex-shrink: 1; flex-basis: auto;

flex: 1 500px

flex-grow: 1; flex-shrink: 1; flex-basis: 500px;

*여백의 비로 아이템의 너비를 조절하는 것이 아닌, 영역 자체를 원하는 비율로 분할하려면 flex-basis:0; 으로 처리

 

 

 

 

부모선택자 { align-self: 속성값; }

특정 플렉스 아이템만 정렬 방법을 지정하는 속성

*align-items 속성보다 우선으로 적용

*속성값

auto (기본값) : container 의 align-items 속성을 상속받음

stretch : 플렉스 아이템의 높이가 교차축의 height 값에 따라 늘어남

flex-start : 교차축의 시작점에 맞춰 아이템을 정렬

(flex-direction:row 일 때는 위쪽, :column 일 때는 왼쪽에 맞춰 정렬)

flex-end : 교차축의 끝점에 맞춰 아이템을 정렬

(flex-direction:row 일 때는 아래쪽, :column 일 때는 오른쪽에 맞춰 정렬)

center : 교차축의 중앙에 맞춰 아이템을 정렬

baseline : 교차축의 문자 베이스라인에 맞춰 아이템을 정렬

 

BBB 의 align-self: center; CCC 의 align-self: flex-start; 로 지정 시,

나머지 항목을 제외한 특정 항목인 BBB 와 CCC 만 정렬 방법이 다름