CSS | Flex, Flexbox, float 정리
정라잇 |
개요
코드 작업을 진행하면 영역을 지정하여 작업을 해야합니다. 특히나 디자인 요소를 만들어야 하는 경우는 이러한 과정이 굉장히 중요하니 숙지하는 것이 중요합니다.
부모가 주는 속성
| flex-direction | row, row-reverse column column-reverse | 좌측정렬 우측 역순 정렬 위쪽 세로 정렬 아래 세로 역순정렬 |
| justify-content | flex-start flex-end center space-between space-around space-evenly | 부모 영역의 시작 부분 배치 부모 영역의 끝점 부분 배치 부모 영역의 중앙 부분 배치 자식을 균등하게 배치 (시작, 끝점을 끝점에 배치) 자식을 균등하게 배치 (좌우 여백을 동일하게 배치) 자식을 균등하게 배치 (완전히 동일하게 배치) |
| align-items | stretch (기본값) center flex-start flex-end baseline | 부모 영역을 자식이 채움 부모 영역 중간 부분에 자식 배치 부모 영역 시작 부분에 자식 배치 부모 영역 끝점 부분에 자식 배치 부모 영역 시작 부분에 자식 배치 (여백은 폰트 사이즈에 맞춤) |
| flex-wrap (줄바꿈) | nowrap wrap wrap-reverse | 자식들 폭이 부모 폭보다 넓어도 한줄로 처리 자식들 폭이 부모 폭보다 넓으면 다음줄로 넘어감 자식들 폭이 부모 폭보다 넓으면 다음줄로 넘어감 (줄순서변경) |
| flex-flow | row wrap row-reverse nowrap column wrap-reverse column wrap | flex-direction 과 flex-wrap 을 합쳐놓은 속성입니다 |
| align-content | start center space-between space-around | align-items 와 비슷한 기능입니다. |
자식에게 주는 속성
flex-item
| order | 컬럼의 순서를 변경합니다 | |
| flex | flex: 1; | 자식요소에게 1의 비율을 줍니다 |
| flex-grow | ||
| flex-shrink | ||
| flex-basis | ||
| align-self | align-self | 자식이 직접 세로 정렬을 위치지정합니다 |
:nth-child 사용법을 익힌 다음 사용하면 좋습니다.
display: flex
| left | float : left; | 왼쪽 정렬 |
| right | float : right; | 오른쪽 정렬 (글자도 역순) |
| none | float : center; | 가운데 정렬 |
오른쪽으로 정렬해야 한다면 자식요소가 역순으로 들어갈 수 있기 때문에 부모 요소를 만들어 float : right; 를 주어야 합니다.
overflow: hidden;float 요소를 해제하는 방법입니다.
div { clear:both; }float 의 영향을 받은 요소를 float 해제시킵니다.
.clear:after { content:""; display:block; clear:both; }공백의 content를 block화 시켜 다음 줄로 넘깁니다. 자주 사용되기 때문에 일반적으로 클래스를 만들어 사용합니다.