Flex는 레이아웃 배치 전용 기능으로 고안
레이아웃을 만들 때 딱히 사용할게 없어서 쓰던 float나 inline-block 등을 이용한 기존 방식보다 편리
flex-start
: 요소들을 컨테이너의 왼쪽으로 정렬flex-end
: 요소들을 컨테이너의 오른쪽으로 정렬center
: 요소들을 컨테이너의 가운데로 정렬space-between
: 요소들 사이에 동일한 간격space-around
: 요소들 주위에 동일한 간격flex-start
: 요소들을 컨테이너의 꼭대기로 정렬flex-end
: 요소들을 컨테이너의 바닥으로 정렬center
: 요소들을 컨테이너의 세로선 상의 가운데로 정렬baseline
: 요소들을 컨테이너의 시작 위치에 정렬stretch
: 요소들을 컨테이너에 맞도록 늘림flex-start
: 여러 줄들을 컨테이너의 꼭대기에 정렬flex-end
: 여러 줄들을 컨테이너의 바닥에 정렬center
: 여러 줄들을 세로선 상의 가운데에 정렬space-between
: 여러 줄들 사이에 동일한 간격space-around
: 여러 줄들 주위에 동일한 간격stretch
: 여러 줄들을 컨테이너에 맞도록 늘림row
: 요소들을 텍스트의 방향과 동일하게 정렬 가로row-reverse
: 요소들을 텍스트의 반대 방향으로 정렬 가로역방향column
: 요소들을 위에서 아래로 정렬 세로column-reverse
: 요소들을 아래에서 위로 정렬 세로역방향flex는 자식들이 width가 넘더라고 줄여서 무조건 한줄에 나오려는 속성이 있음
nowrap
: 모든 요소들을 한 줄에 정렬 (기본값)wrap
: 부모 요소에 넘치는 자식 요소들을 여러 줄에 걸쳐 정렬 (떨군다!!)wrap-reverse
: 요소들을 여러 줄에 걸쳐 반대로 정렬만약, 4개의 항목이 있는데 2개씩 정렬하고 싶을때
부모에 flex-wrap: wrap;을 주고
항목에 flex: 0 1 calc(50% - 5px);
->grow 하지 않고(0), shrink 하고(1) width 50% 사이 간격 10px 가정하에
자식 요소에 오더값을 주면 순서를 독단적으로 결정할 수 있다
order: -1 전(앞)으로 한칸
order: 0 제자리
order: 1 후(뒤)로 한칸
order를 명령 하지 않은 요소는 다 0으로 셋팅 되어 한 뭉텅이로 간주되어 이동된다.
flex-grow: ; → 자라나다~ / 증가될때의 비율
(요소에 width 값을 설정했을때 그 기준으로 화면이 증가 되면 커짐)
flex-grow:1을 주면 다른 요소를 뺀 나머지 영역을 다 채움
flex-shrink: ; → 줄어들다 / 줄어들때의 비율 — 기본값으로 1이 들어가있다
(요소에 width 값을 설정했을때 그 기준으로 화면이 감소 되면 작아짐)
flex-basis: ; → 중심축기준값 (위드, 높이가 될 수도 있다)
따로 flex-basis를 설정 안하면 width/height값으로 수축/감소하지만,
flex-basis를 쓸 경우는 width나 height 값을 설정하지 않고도 basis값이 기준이 되어서 수축/감소 한다 (flex-basis를 주고 width나 height 값을 줘도 basis값으로 적용된다)
-기본을 가로가 기준으로 flex-bais값을 주면 width 값으로 적용 되지만
flex-diretion: cloumn; 을 부모에게 주고
자식에게 flex-basis값을 주면 기준값이 세로로 변경 되었기 때문에 height 가 늘어난다.
flex : grow값 shrink값 basis값 다 합쳐서 쓰는 것
flex: 1 = flex: 1 1 100%
자식에 따로 선언 x
가 기본으로 적용 되는 속성이여서 높이값을 지정하지 않아도 다른 요소의 높이값을 동일하게 가져감
flex:1; 선언한 요소한테 min-width: 0; 을 쓰면
말줄임하고 싶은 요소한테 white-space: nowrap; 을 써도 가로스크롤이 생기지 않는다.
절대 요소에 width 값을 직접적으로 px로 박아버리지 말자
두줄이상되는 요소는, display: -webkit-box; 로 변경해주기
나머지는 float에서 정리한 내용과 같음