[생활코딩] CSS 수업 정리 (7)

< flex 4: holy grail layout >

holy grail layout

header

section(중간위치)

footer

section 내부

제일 상단 - nav

nav 옆 - main

광고부분 - aside

수평으로 나란히 하려면,

 

우선 일단 flex를 사용하려면

container에다가

display:flex;를 사용해야 한다.

그럼 이렇게 수평으로 이동을 하게됨

이유: flex에 direction이 row로

디폴트 값으로 되어있기 떄문.

column으로 바꿀 시,

헤더, 섹션, 푸터가

수직으로 바뀌게 된다.

아래쪽에만 border 적용

border-bottom: 1px solid 색상;

위쪽 border 적용

border-top: 1px solid gray;

 

section에 있는 항목들을

가로방향으로 놓기

( nav / main / aside )

 

항목들의 부모인

content 에게

flex 효과를 주면 된다.

display:flex;

그러면 이렇게

가로로 나열 됨.

content 밑에 있는 nav와 aside에

border 효과

크기를 조정하면

nav 와 aside 부분은 고정돼있고

content부분만 이동하게된다.

nav와 aside 에게 똑같이

flex-basis를 준다면

화면을 키운다면

nav는 150px 만큼 커지고

aside 도 사실 150px인데

뒤에 배경이 없어서 늘어져 보임.

화면을 줄이면

3개의 태그 모두

줄어들어 보임.

flex-shrink:0;

을 줬을 경우,

nav, aside는

줄어드는게 없어진다.

 

그리고 기본적으로 item들은

flex-shrink 값이 1이기 떄문에,

중간에 있는 main은

1의 값을 갖고 있다.

ㅇㄻㄴ

화면을 줄였을 때

중간에 있는 main만 줄어들게 됨.

---

< flex 5: 기타 속성 들 >

flex - CSS (opentutorials.org)

flex - CSS

1. 컨테이너에 주어지는 속성

2. 아이템에 주어지는 속성

 

FLEX-DIRECTION

row - 기본

FLEX-WRAP

nowrap - 기본

nowrap과 wrap의 차이

: wrap을 하게되면

컨테이너의 크기보다

아이템의 크기가 크면

(아이템들 크기의 합이 크다면)

아이템은 줄바꿈이 돼서

아래 줄로 내려감

ALIGN-ITEMS

strech - 기본

 

컨테이너에 아이템들이 있고,

컨테이너가 플렉스 되는 순간에

아이템들은 컨테이너의 높이 값과 같아짐.

 

아이템들이 stretch 상태기 때문.

각각의 아이템들이 

자신의 컨텐트 크기만하게 되려면

flex-start

 라는 것을 해주면 된다.

혹은 flex-end

center 는 중간

baseline

JUSTIFY-CONTENT

수평과 관련되어 있음.

9:00

justify-content의 활용