[HTML/CSS] CSS Display & Flex 속성

👀 Display

Display는 화면에 요소를 어떻게 보여줄지를 결정하는 속성이다.

✨ Display 속성

1) none: 화면에서 사라지게 한다. 레이아웃을 차지하지 않는다.

💥 { visibility: hidden }과 { display: none }의 차이점

2) block: div 태그의 기본 값, 레이아웃이 가로 한 줄을 통째로 차지한다. 강제로 줄 바꿈을 한다.

ex) <div>, <p>, <form>, <h1> etc.

3) inline: 컨텐츠 크기만큼 레이아웃을 차지한다. 줄 바꿈 현상이 없다.

ex) <span>, <a>, <img>, <b> etc.

4) inline-block: inline과 block을 합쳐 놓았다. 크기를 지정할 수 있으며 줄 바꿈 현상이 없다. IE 7(Internet Explore 7)버전 이하는 사용이 불가능하다.

5) flex: 가로 또는 세로 한 방향으로 배치할 수 있게 한다.(1차원)

6) grid: 가로와 세로 두 뱡향으로 배치할 수 있게 한다.(2차원)

7) table: 레이아웃을 <table> 형태로 표현할 수 있게 한다.

💰 Flex(Flex)

Flex 또는 Flexbox는 1차원 레이아웃에서 아이템들을 배치 및 정렬하는데 사용한다.

✨ Flex 속성

1) flex-direction

flex-direction은 아이템을 배치하는 축의 방향을 결정하는 속성이다.

flex-direction: row; //가로 배치
flex-direction: column; //세로 배치
flex-direction: row-reverse; //가로 역순 배치
flex-direction: column-reverse; //세로 역순 배치

2) justify-content

justify-content는 메인 축(main axis)아이템 정렬을 결정하는 속성이다.

justify-content: flex-start; //시작점 정렬
justify-content: flex-end; //끝점 정렬
justify-content: center; //가운데 정렬
justify-content: space-between; //균일한 사이 간격으로 정렬
justify-content: space-around; //균일한 둘레 간격으로 정렬
justify-content: space-evenly; //가로 둘레와 사이 간격으로 정렬

3) align-items

align-items는 수직축(cross axis) 아이템 정렬을 결정하는 속성이다.

align-items: stretch; //수직축 끝까지 늘려서 정렬
align-items: flex-start; //시작점 정렬
align-items: flex-end; //끝점 정렬
align-items: center; //가운데 정렬
align-items: baseline; //텍스트 기준선을 맞추어 정렬