display: flex에 대해서 익혀보자!

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할 때 더 편할 것 같아서 정리해본다!!!!!!!!!!!