[CSS] display / grid / flex

display

HTML 요소들을 어떻게 보여줄지 결정하는 속성

하위 속성 : none, block, inline, inline-block, grid, flex 등이 있음

---

📑 block

기본적으로 가로의 길이는 100%로, 한 줄에 하나의 div만 배치가 되고,

원하는 높이와 너비를 적용할 수 있음

.block {
  display: block;
  width: 300px;
  height: 300px;
}

block 적용 화면

---

📑 inline

기본적으로 한 줄에 여러 개의 div 배치가 되고,

길이와 높이의 값을 설정해도 div 안의 내용에 따라 길이와 높이가 결정됨

.inline {
  display: inline;
  width: 300px;
  height: 300px;
  margin: 5px;
}

inline 적용 화면

---

📑 inline-block

inline의 특징과 block의 특징 모두 적용된 값으로, 기본적으로 한 줄에 여러 개의 div가 배치가 되고,

div 안의 내용 따라 길이와 높이가 결정되지만 길이와 높이를 설정하면 설정한 값으로 크기가 적용됨

.inline-block {
  display: inline-block;
  width: 150px;
  height: 200px;
  margin: 5px;
}

inline-block 적용 화면

---

📑 none

화면에서 사라지게 하는 속성으로, 화면에 보여주고 싶지 않을 때 적용할 수 있음

.none {
  display: none;
}

---

grid

레이아웃을 구성하기 위한 속성으로, 행과 열을 사용하여 배치하고 정렬할 수 있으며,

부모 요소에 grid를 설정하면 자식 요소들은 grid-item으로 개별 항목을 나타냄

---

📑 grid-template-columns

그리드 컨테이너 안에 들어갈 열의 크기와 간격을 정의하는 속성으로, 아이템의 가로 길이를 설정할 수 있음

일정 비율을 나타내는 fr을 사용해서 1:1:2의 비율로 나타낼 수 있음

.grid1 {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
}

.grid2 {
  display: grid;
  grid-template-columns: 100px 100px 100px;
}

grid-template-columns 적용 화면

---

📑 grid-template-rows

그리드 컨테이너 안에 행의 크기를 정의하는 속성으로, 아이템의 세로 길이를 설정할 수 있음

.grid-template-rows {
  display: grid;
  grid-template-rows: 1fr 2fr 3fr;
}

grid-template-rows 적용 화면

---

📑 grid-template-columns & grid-template-rows

그리드 컨테이너의 열과 행 속성 모두 적용

.grid {
  display: grid;
  grid-template-columns: 100px 200px;
  grid-template-rows: 1fr 2fr 3fr;
}

grid-template-columns & grid-template-rows 적용 화면

---

flex

자식 요소들의 배치를 유연하게 조작할 수 있는 설정으로,

display : flex를 적용하면 기본적으로 'justify-content : flex-start' 값이 적용되며, 요소들이 flex 박스의 왼쪽으로 정렬함

---

📑 flex-direction

flex는 기본적으로 한 줄로 정렬이 되는데, 줄의 방향을 정하는 속성

row : 왼쪽에서 오른쪽으로 정렬

row-reverse : 오른쪽에서 왼쪽으로 정렬

column : 위에서 아래로 정렬

column-reverse : 아래에서 위로 정렬

.group1 {
  display: flex;
  flex-direction: row;
}

.group2 {
  display: flex;
  flex-direction: row-reverse;
}

.group3 {
  display: flex;
  flex-direction: column;
}

.group4 {
  display: flex;
  flex-direction: column-reverse;
}

flex-direction 적용 화면

---

📑 justify-content

요소들을 정렬하는 속성

justify-content는 가로 방향으로, align-content는 세로 방향으로 정렬할 수 있고 세부 속성은 동일함

flex-start(왼쪽)·center(중앙)·flex-end(오른쪽) 정렬을 할 수 있음

.group1 {
  display: flex;
  justify-content: flex-start;
}

.group2 {
  display: flex;
  justify-content: center;
}

.group3 {
  display: flex;
  justify-content: flex-end;
}

justify-content 적용 화면

 

 

아이템들의 간격을 기준으로 정렬할 수 있음

space-around : 아이템 양 옆의 간격을 동일하게 정렬

space-between : 아이템 사이의 간격을 동일하게 정렬

space-evenly : 아이템의 양 끝과 사이의 간격을 동일하게 정렬

.group1 {
  display: flex;
  justify-content: space-around;
}

.group2 {
  display: flex;
  justify-content: space-between;
}

.group3 {
  display: flex;
  justify-content: space-evenly;
}

justify-content 적용 화면

---

📑 align-items

justify-content 속성과 다르게 세로를 기준으로 아이템들을 정렬하는 속성

.group1 {
  display: flex;
  justify-content: center;
  align-items: start;
}

.group2 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.group3 {
  display: flex;
  justify-content: center;
  align-items: end;
}

.group4 {
  display: flex;
  justify-content: center;
  align-items: stretch;
}

align-items 적용 화면