시작은 css 의 display의 flex 라고 지정하고선 시작을 한다
flex는 부모태그에 지정을해서 자식태그들이 정렬 되게 한다.
flex 를 안줬을경우
flex를 줬을 경우
flex - direction 속성
1. flex-direction:row
row 는 기본값으로 flex-direction 이 설정안되도 row 가 기본값으로 들어가있음
row 는 가로를 뜻함 (행) 그래서 item 들이 가로로 정렬
2. flex-direction:column
column (세로 , 열) 으로 설정하면 item 들이 세로방향으로 정렬됨
3. flex-direction : column-reverse
column-reverse (세로 , 열) 으로 설정하면 item 들이 세로방향으로 반대로 역? 정렬됨
div의 내용까지 거꾸로 시작하면서 배치됨.
4. flex-direction : row-reverse
row-reverse (역가로 , 역행) 으로 설정하면 item 들이 가로방향으로 역방향으로 시작됨
div 내용도 오른쪽부터 순서대로 시작
flex - basis: 속성
basis는 기본값이라는 뜻이다 , 하위 엘리먼트들에게 크기값을 설정한다.
flex-direction 속성에 따라 basis(기본의) 의 크기값이 설정된다.
column 일 경우 세로의 크기가 200px
row 일경우 가로의 크기가 200px
내가 설정한 width 또는 height 는 무시되면서 설정된다.
1. flex - grow 속성
자식 엘리먼트에 사용하며 부모의 크기를 균등하게 나눠가진다.
flex-grow : 0 일경우
기존 설정된 width와 height 의 크기에 따라 크기가 할당된다
flex-grow : 1 일경우
각각의 엘리먼트들의 flex-grow:1 이라는 속성이 가지고잇어
1:1:1 비율로 부모의 크기를 차지한다.
flex-grow : 한엘리먼트만 2일 경우
위그림처럼 2번째 엘리먼트만 grow를 2로 할경우
1:2:1 비율로 크기가 설정이된다.
이경우 width 를 설정할경우 영향을 받고 글씨나 content가 잇을경우 그거에도 영향을 받는거 같은데
확실히 어떻게 영향을 받는지를 모르겟다 다 제거하였을경운 저렇게 깔끔하게 1:2:1 비율이 나온다
2. flex - shrink 속성
반응형? 크기를 줄일경우 (부모의 크기지정 x 자식 크기지정 o) 하였을경우 창크기를 줄이면
부모의 크기가 줄어들었다가 부모의크기가 다줄고나선 자식의 크기가 줄어드는데
자식의 크기를 비율로 줄어들게 할 수 있다.
(줄이기전)
(줄이고나서)
이렇게 1:2:1 비율로 빨리 줄어든다
flex-shrink 가 0 일경우 줄어들지 않는다.
3. flex - flow 속성
flex-flow 속성은 flex item의 flex-direction 속성과 flex-wrap 속성의 값을 한꺼번에 작성할 수 있는 단축 속성입니다.
flex-flow :
flex 의 여러 속성들
컨테이너(부모) 적용 속성들
1. flex-wrap
기본값은 nowrap 이며 컨테이너에 쓰며 컨테이너 안의 items 들의 크기가 컨테이너보다 크면
(컨테이너 < items) 일경우 아이템들이 부모컨테이너를 넘지 않고 줄바꿈이 되는것을 말한다
flex-wrap : nowrap; // items들이 커도 줄바꿈을 안한다 (defult)
flex-wrap : wrap; // items들이 크면 줄바꿈을 한다
flex-wrap : wrap-reverse; // item들의 배치를 12345 에서 역순으로 54321로 배치한다
2. ALIGN-ITEMS ( 수직 정렬 : 세로 (direction:row일경우))
컨테이너에 쓴다. 기본값은 stretch(뻗다)
컨테이너의 크기에 맞춰 세로크기들이 정렬되거나 커진다.
**direction: column 일경우 수직정렬이아니라 수평정렬로 바뀐다.**
align-items : flex-start // 수직 세로로 윗줄로 items의 크기들에 맞춰서 정렬
align-items : flex-end // 수직 세로로 아랫줄로 items 정렬
align-items : center // 수직 세로로 가운데로 iems 정렬
align-items : baseline // 보이지않는 줄로 item 정렬 @아직도 잘 모르겟닷 이건
align-items : stretch // 부모 컨테이너의 모든공간 차지 (기본값 : default)
3.JUSIFY-CONTENT (수평 정렬 : 가로 (direction:row일경우))
부모컨테이너 안의 items 들을 가로로 정렬하는것을 말한다.
**direction: column 일경우 수평정렬이아니라 수직정렬로 바뀐다.**
justify-content : flex-start // 왼쪽에서부터 차례대로 시작
justify-content : flex-end // 오른쪽에서부터 차례대로시작
justify-content : space-between // items 사이의 간격을 균등하게 띄운다
justify-content : center // items 들을 가운대로 배치
justify-content : space-around // 양 끝에 공간을 주고 items 사이의 공간들을 균등하게 띄운다.
4.ALIGN-CONTENT (행으로 그룹지어서 수직정렬 (direction:row일경우))
기본값은 stretch 이며 align-items랑 매우 비슷하지만 align-items 들은 안에있는 아이템들을 각각 다
사용하여 정렬하였다면 이 content는 가로 행으로 기준으로 그룹하여 그룹정렬한다
(wrap 가 nowrap 일경운 다 한줄로 나오지만 wrap 일경운 크기에맞춰 items들이 줄바꿈된다)
align-content : stretch // 기본값 각 items들이 모두 공간을 차지
align-content : flex-start // items의 행그룹들이 크기별로 위로 정렬
align-content : flex-end // items의 행그룹들이 크기별로 아래로 정렬
align-content : center // items의 행그룹들이 크기별로 가운데로 정렬
align-content : space-between // items의 행그룹들이 그룹사이에 균등한 공간을 두고 정렬
align-content : space-around // 행그룹들이 컨테이너의 위아래 공간을 두고 행그룹 사이사이 균등공간 정렬
align-content : space-evenly // 부모컨테이너와 행그룹사이사이의 공간을 균등히 정렬
items(자식) 적용 속성
align-self (item개별의 수직 정렬)
items의 각각의 개별 자식들에게 수직정렬을 주고싶을떄 사용
align-self : auto // item 의 자동정렬
align-self : flex-start // item 의 처음부터 정렬
align-self : flex-end // item 의 마지막부터 정렬
align-self : center // item 의 가운데 정렬
align-self : baseline // item 의 가상의 줄을 만들어 정렬 (가상의 줄이 뭔지잘모르겠다)
align-self : stretch // item 의 전체 차지 (단어 뜻은 뻗기)
flex (flex를 한줄로 쓰기)
.item { flex: flex-grow [flex-shrink] [flex-basis];
이렇게 flex를 한줄로 줄여서 쓸수있다.
flex : 1 0 100%;
첫번쨰 프로퍼티는 grow , 2번쨰는 shrink , 3번째는 basis가 된다.
order (items 의 순서)
.item1 { order : 1;}
.item2 { order : 2;}
.item3 { order : 3;}
.item4 { order : 4;}
이렇게 정렬 하면 정렬 순서대로 item 들이 배치가된다
본 필자의 내용정리는 이고잉 자바스크립트를 보고 공부한것을 적은것이다.
아래 주소는 생활코딩 홈페이지에서 가져온 예제 작동? 예제들이다.
flex layout
flex로 레이아웃을 짜보자. 먼저 가장 대표적이고 많이 사용되는 레이아웃을 소개하겠다.
flex holy grail layout (성배레이아웃) 이다.
사람들이 레이아웃을 여러가지방법으로 짜면서 가장 많이쓰고 화두되는 레이아웃 방법이다.
주로 이런식의 레이아웃으로 짠다
아래는 소스코딩과 브라우저 띄운 모습이다.
나는 헤더다 머릿말이지
여기까지 보시느라 수고하셨습니다.
그러면 게임을 통해 숙련을 해봅시다.
이건 유명한게임이라 잘알고 계실 겁니다.
개구리를 색깔 맞춰 잎파리에 놓는겁니다.
'디자인 > CSS' 카테고리의 다른 글
| CSS -background (0) | 2019.03.05 |
|---|---|
| CSS - FLOAT (0) | 2019.03.05 |
| CSS - 타이포그래피 (0) | 2019.03.04 |
| CSS - box-sizing (0) | 2019.03.04 |
| CSS - GRID (0) | 2019.03.04 |