굉-장-히 많이 쓰이지만, 헷갈리는 flex 정리하기!
flex
엘리먼트의 width나 height를 지정하지 않고도 유연하고 균형잡힌 배치가 가능하다. 박스 레이아웃 작성 시 아주 유용함
주의사항
Container와 Items에 적용하는 속성이 구분되어있음
Container에는 display, flex-flow, justify-content 등의 속성을 사용할 수 있으며, Items에는 order, flex, align-self 등의 속성을 사용할 수 있다.
flex의 부모는 직계 자식만 영향을 준다.
1. 사용법 - Container
📌 1) container 필수 지정 속성 두 가지
display: flex;
flex-direction: row; (row || column || row-reverse || column-reverse) flex-direction
row : 가로방향 정렬
column : 세로방향 정렬
* column-reverse , row-reverse : 각 방향에서 역순으로 정렬
📌 2) container 선택 지정 속성
(1) flex-wrap : 줄바꿈
flex-wrap : wrap
ㄴ 기본값: flex-wrap: nowrap (앙바꿔줌)
(2) justify-content : row 방향 정렬
✔️ flex-start : flex 방향 시작점 기준 (기본값)
✔️ flex-end : flex 방향 끝점 기준
✔️ center : 중앙 정렬
✔️ space-between : flex 방향 양 끝점 기준 (양 끝에 붙혀서)
✔️ space-around : flex 방향 중앙점과 양 끝 기준 (양 끝과도 간격을 둠)
(3) align-items : col 방향 정렬
✔️ stretch : 수직 방향에 최대한 늘려서 (기본값)
✔️ flex-start : 수직 방향에 위쪽
✔️ flex-end : 수직 방향에 아래쪽
✔️ center : 수직 방향 가운데
✔️ baseline : 컨테이너의 기준선에 배치
(4) flex-flow : flex-direction + flex-wrap
공백문자를 이용하여 두 속성의 값들을 인자로 받음
flex-direction: row wrap;
2. 사용법 - items
자식은 수가 많기 때문에 주로 class 선택자를 이용해서 속성을 정의함
flex : <grow (팽창 지수)> <shrink (수축 지수)> <basis (기본 크기)>
-
flex-grow속성
* 비율임에 유의- 양수로 지정하면 flex 항목별로 주축 방향 크기가 flex-basis 값 이상으로 늘어날 수 있음.
- flex-grow값을 1로 지정하면 사용가능한 공간은 각 항목에게 동일하게 분배되고, 각 항목은 주축을
따라 분배받은 값만큼 사이즈를 늘려 공간을 차지함. ex) (비율) 2:1:1
-
flex-shrink속성
비율임에 유의
주축의 공간이 부족할 때 각 항목의 사이즈를 줄이는 방법을 정의함
-
flex-basis속성
* 항목의 크기 결정
기본값 : auto
크기가 지정되어 있지 않으면, flex-basis값으로 사용됨.
따라서 flex 컨테이너에서 display: flex 속성만 지정하면 flex 항목들이 각 내용물 크기만큼 공
간을 차지함
ㄴ shrink 와 grow 값을 함께 지정하는 건 권장 x
ㄴ basis는 부모의 요소나 자식 그외 비율과 관계 없이 고정되는 넓이에 값을 지정함. 주로 px값을 넣는다.
(1) align-self
한 가지 요소만 정렬 다르게 해줌
align-self: auto | stretch | center | flex-start | flex-end | baseline기본속성
align-self : auto
align-self : stretch
align-self : center
align-self : flex-start
align-self : flex-end
align-self : baseline
(2) order
flex로 자식을 배치할 때 입력한 순서대로 출력
음수도 사용 가능
