Flex는 레이아웃 배치 전용 기능으로 고안되었다. 그래서 레이아웃을 만들 때 훨씬 강력하고 편리한 기능들이 많다.
flex는 부모 요소에서 display: flex; 를 적용하는게 시작이다.
display: flex;
: 가로방향으로 자식요소의 너비만큼 차지
display: block;
: 세로방향으로 줄바꿈이 들어가 자식요소들이 한줄씩 차지
display: inline-flex;
display: inline-block;
: inline이 추가되면 자식요소들 크기만큼만 차지
<배치 방향 설정>
flex-direction: row;
: 자식요소를 가로 방향으로 배치
flex-direction: row-reverse;
: 자식요소를 역순으로 가로 방향으로 배치
flex-direction: column;
:자식요소를 세로 방향으로 배치
flex-direction: column-reverse;
:자식요소를 역순으로 세로 방향으로 배치
<줄넘김 처리 설정>
flex-wrap: nowrap;
: 줄 바꿈 안하고 넘치면 삐져나감
flex-wrap: wrap;
: 넘치면 줄 바꿈을 함
flex-wrap: wrap-reverse;
: 줄바꿈을 하는데, 자식요소를 역순으로 배치함
.
.
flex-flow
flex-direction과 flex-wrap을 한꺼번에 지정할 수 있는 단축 속성이다.
ex) flex-direction: row wrap;
<메인축 방향 정렬>
justify-content: flex-start;
: 자식 요소를 시작점으로 정렬한다. row(가로 배치)일 때는 왼쪽, column(세로 배치)일 때는 위이다.
justify-content: flex-end;
: 자식 요소를 끝점으로 정렬한다. row(가로 배치)일 때는 오른쪽, column(세로 배치)일 때는 아래이다.
justify-content: center;
: 자식 요소를 가운데로 정렬한다.
justify-content: space-btween;
: 자식 요소 사이에 균일한 간격을 만든다.
justify-content: space-around;
: 자식 요소의 둘레에 균일한 간격을 만든다.
justify-content: space-evenly;
: 자식 요소 사이와 양 끝에 균일한 간격을 만든다.
<수직축 방향 정렬>
align-items: stretch;
: 자식 요소들이 수직축 방향으로 끝까지 쭉 늘어남
align-items: flex-start;
: 자식 요소를 시작점으로 정렬한다. flex-direction이 row(가로 배치)일 때는 위, column(세로 배치)일 때는 왼쪽이다.
align-items: flex-end
: 자식 요소를 끝으로 정렬한다. flex-direction이 row(가로 배치)일 때는 아래, column(세로 배치)일 때는 오른쪽이다.
align-items: center;
: 자식 요소가 가운데로 정렬된다.
align-items: baseline;
: 자식 요소들을 텍스트 베이스라인 기준으로 정렬한다.
.
.
따라서, justify-content: center;
align-item: center;
이렇게 해주면 자식요소를 한가운데 정렬하기 쉽다.
<여러 행 정렬>
flex-wrap이 설정된 상태에서, 자식요소들의 행이 2줄 이상 되었을 때 수직축 방향 정렬을 결정하는 속성이다.
flex-wrap: wrap;
align-content: stretch;
align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-between;
align-content: space-around;
align-content: space-evenly;
이 속성들은 더 위에 justify-content와 align-item를 이해했다면 이해할 수 있을 것이다.
# 오늘의 일기
오늘은 displat: flex의 속성에 대해 알아보았다. 이렇게 많은 속성이 있을 줄 몰랐다... 많은 속성을 알아야 한다는 것에 머리가 하얘졌지만 포기하지 않고 검색을 통해 보기쉽게 정리해 놓은 사이트를 참조하여 내 방식대로 정리해보았다. 복붙하지 않고 하나하나 타자로 쳐보니 머릿속에 더 잘 남는 것 같았다. 까먹으면 다시 내가 정리해 놓은 것을 보면 되니깐 마음이 편해졌다.
display: flex;
flex-direction: row/column;
justify-content: center;
align-items: center;
이렇게 네 개의 코드를 한세트로 외우는 것이 CSS할 때 더 편할 것 같아서 정리해본다!!!!!!!!!!!
'강의' 카테고리의 다른 글
CSS 활용해서 반응형 웹사이트 만들기 (0) | 2024.08.05 |
---|---|
[Git] 브랜치 생성, 브랜치 목록 확인 및 원격 브랜치 로컬로 가져오기 (0) | 2024.08.05 |
HTML <a> 태그를 이용한 내부링크 걸기 (0) | 2024.07.17 |
HTML CSS JS 외부 링크 연결하는 방법 (0) | 2024.07.16 |
Github 명령어 정리 (0) | 2024.07.15 |