웹1 9일차

[flex 시작]

수업 코드펜 바로가기

 

젠코딩땐 띄어쓰기 안하기 *********

 

[높이]

-. 모든 태그는 높이가 auto(기본값)일떄 0으로 작동한다.

-. flex-item이 되면 높이가 auto(기본값)일때 100%로 작동한다

 

.

컨테이너의 높이 auto=0으로 설정되었으면

1~4번의 item은 auto로 설정, 5만 100으로 설정됨

하위엘리먼트로 상속받아서 어쩌구..자롬르겟ㅇ,ㅁ

 

 

 

[flex item 세로 정렬]

수업 코드펜 바로가기

 

[flex container]

-. 아이템을 정렬하는 코드는 전부 flex-container에 작성된다.

ㄴ justify=content : 가로정렬

ㄴ align-items : 세로정렬

ㄴ flex-direction : 방향정렬

ㄴ flex-wrap : 줄바꿈 정렬 (반응형)

ㄴ align-content : 줄바꿈 되었을 때 정렬 (반응형)

-. display: flex;가 적용된 엘리먼트를 flex-container 라고 부른다.

-. 브라우저에서 도형 취급 받는다. margin-left: auto;와 margin-right: auto;로 정렬한다.

-. width: auto일때 100%로 작동한다.

 

[flex-item]

-. display: flex;가 적용된 엘리먼트의 "자식만" flex-item이라고 부른다.

-. width: auto일때 0으로 작동한다.

-. height: auto일때 100%로 작용한다.

-. text-align을 사용하여 정렬할 수 없다.

-. flex-item의 크기를 직접적으로 커스텀하는 속성은 flex-item에 직접 적용한다.

ㄴ flex-grow  :  비율

ㄴ flex-basis  :  비율 설정

ㄴ flex-shrink :  고정 설정

- align-items가 적용된 align-item은 height: auto;일때 0으로 작동된다.

 

[flex-direction] 방향

(row)

justify=content : 가로정렬

align=items : 세로정렬

flex-grow : 가로에서 작동

 

(column)

justify=content : 세로정렬

align=items : 가로정렬

flex-grow: : 세로에서 작동

 

flex-container 높이 = flex-item 높이

ㄴ(문제점) 높이가 같아서 정렬할 수 없다.

ㄴ(해결) flex-container가 강제로 flex-item 높이를 작게 만들어서 원하는 위치로 정렬시킨다.