<Flex와 Grid의 차이>
Flex: 한 방향 레이아웃 시스템 (1차원)
Grid: 두 방향(가로-세로) 레이아웃 시스템 (2차원)
Flex레이아웃을 만들기 위한 HTML 기본 구조
<div class="container">
<div class="item">helloflex</div>
<div class="item">abc</div>
<div class="item">helloflex</div>
</div>부모 요소인 div.container : Flex Container(플렉스 컨테이너)
자식 요소인 div.item : Flex Item(플렉스 아이템)
“컨테이너가 Flex의 영향을 받는 전체 공간이고, 설정된 속성에 따라 각각의 아이템들이 어떤 형태로 배치되는 것”
[Flex 컨테이너에 적용하는 속성]
[Flex 적용]
display: flex;
Flex를 적용하면 아이템들은 가로 방향으로 배치됨.
width: 자신이 가진 내용물의 width 만큼.(inline 요소들 처럼)
height: 컨테이너의 높이만큼 늘어남.
- inline-flex; 는 inline-block; 처럼 동작
[배치 방향 설정]
flex-direction
.container {
flex-direction: row;
/* flex-direction: column; */
/* flex-direction: row-reverse; */
/* flex-direction: column-reverse; */
}- row : 아이템들이 행(가로) 방향으로 배치
- row-reverse : 아이템들이 역순으로 가로 배치
- column : 아이템들이 열(세로) 방향으로 배치
- column-reverse : 아이템이 역순으로 세로 배치
[줄넘김 처리 설정]
flex-wrap
.container {
flex-wrap: nowrap;
/* flex-wrap: wrap; */
/* flex-wrap: wrap-reverse; */
}- nowrap (기본값) : 줄바꿈을 하지 않고 넘치면 삐져 나감
- wrap : 넘치면 줄바꿈 함. float이나 inline-block으로 배치한 요소들과 비슷하게 동작.
- wrap-reverse : 줄바꿈 하지만 아이템 역순 배치.
flex-flow
.container {
flex-flow: row wrap;
/* 아래의 두 줄을 줄여 쓴 것 */
/* flex-direction: row; */
/* flex-wrap: wrap; */
}flex-direction과 flex-wrap을 한꺼번에 지정할 수 있는 단축 속성.
flex-direction, flex-wrap의 순으로 한 칸 떼고 작성.
[메인축 방향 정렬]
justify-content
.container {
justify-content: flex-start;
/* justify-content: flex-end; */
/* justify-content: center; */
/* justify-content: space-between; */
/* justify-content: space-around; */
/* justify-content: space-evenly; */
}- flex-start (기본값) : 아이템들을 시작점으로 정렬.
flex-direction이 row(가로 배치)일 때는 왼쪽, column(세로 배치)일 때는 위. - flex-end : 아이템들을 끝점으로 정렬.
flex-direction이 row(가로 배치)일 때는 오른쪽, column(세로 배치)일 때는 아래. - center : 아이템들을 가운데로 정렬.
- space-between : 아이템들의 “사이(between)”에 균일한 간격형성.
- space-around : 아이템들의 “둘레(around)”에 균일한 간격 형성.
- space-evenly : 아이템들의 사이와 양 끝에 균일한 간격 형성.
[수직축 방향 정렬]
align-items
.container {
align-items: stretch;
/* align-items: flex-start; */
/* align-items: flex-end; */
/* align-items: center; */
/* align-items: baseline; */
}- stretch (기본값) : 아이템들이 수직축 방향으로 끝까지 늘어남.
- flex-start : 아이템들을 시작점으로 정렬.
flex-direction이 row(가로 배치)일 때는 위, column(세로 배치)일 때는 왼쪽. - flex-end : 아이템들을 끝으로 정렬.
flex-direction이 row(가로 배치)일 때는 아래, column(세로 배치)일 때는 오른쪽. - center : 아이템들을 가운데로 정렬.
- baseline : 아이템들을 텍스트 베이스라인 기준으로 정렬.
[여러 행 정렬]
align-content
flex-wrap: wrap;이 설정된 상태에서, 아이템들의 행이 2줄 이상 되었을 때의 수직축 방향 정렬을 결정하는 속성
.container {
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; */
}[Flex 아이템에 적용하는 속성]
[박스의 기본 영역]
flex-basis
.item {
flex-basis: auto; /* 기본값 */
/* flex-basis: 0; */
/* flex-basis: 50%; */
/* flex-basis: 300px; */
/* flex-basis: 10rem; */
/* flex-basis: content; */
}flex-basis는 Flex 아이템의 기본 크기를 설정(flex-direction이 row일 때는 너비, column일 때는 높이)
[유연하게 늘리기]
flex-grow
.item {
flex-grow: 1;
/* flex-grow: 0; */ /* 기본값 */
}flex-grow는 아이템이 flex-basis의 값보다 커질 수 있는지를 결정하는 속성.
flex-grow에는 숫자값이 들어가는데, 0보다 큰 값이 세팅이 되면 해당 아이템이 유연한(Flexible) 박스로 변하고 원래의 크기보다 커지며 빈 공간을 메우게 됨.
flex-grow에 들어가는 숫자의 의미는, 아이템들의 flex-basis를 제외한 여백 부분을 flex-grow에 지정된 숫자의 비율로 나누어 가짐.
/* 1:2:1의 비율로 세팅할 경우 */
.item:nth-child(1) { flex-grow: 1; }
.item:nth-child(2) { flex-grow: 2; }
.item:nth-child(3) { flex-grow: 1; }
늘어난 여백의 비율이 1:2:1
[유연하게 줄이기]
flex-shrink
.item {
flex-basis: 150px;
flex-shrink: 1; /* 기본값 */
}flex-shrink는 flex-grow와 쌍을 이루는 속성으로, 아이템이 flex-basis의 값보다 작아질 수 있는지를 결정.
flex-shrink에는 숫자값이 들어가는데, 0보다 큰 값이 세팅이 되면 해당 아이템이 유연한(Flexible) 박스로 변하고 flex-basis보다 작아짐.
flex
flex-grow, flex-shrink, flex-basis를 한 번에 쓸 수 있는 축약형 속성.
이 세 속성들은 서로 관련이 깊기 때문에, 이 축약형을 쓰는 편이 여러모로 편리하다고 함.
.item {
flex: 1;
/* flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */
flex: 1 1 auto;
/* flex-grow: 1; flex-shrink: 1; flex-basis: auto; */
flex: 1 500px;
/* flex-grow: 1; flex-shrink: 1; flex-basis: 500px; */
}[수직축으로 아이템 정렬]
align-self
.item {
align-self: auto;
/* align-self: stretch; */
/* align-self: flex-start; */
/* align-self: flex-end; */
/* align-self: center; */
/* align-self: baseline; */
}align-items의 아이템 버전.
align-items가 전체 아이템의 수직축 방향 정렬이라면, align-self는 해당 아이템의 수직축 방향 정렬.
[배치 순서]
order
.item:nth-child(1) { order: 3; } /* A */
.item:nth-child(2) { order: 1; } /* B */
.item:nth-child(3) { order: 2; } /* C */각 아이템들의 시각적 나열 순서를 결정하는 속성.
숫자값이 들어가며, 작은 숫자일 수록 먼저 배치됨.
“시각적” 순서일 뿐, HTML 자체의 구조를 바꾸는 것은 아니므로 접근성 측면에서 사용에 주의해야함. 시각 장애인분들이 사용하는 스크린 리더로 화면을 읽을 때, order를 이용해 순서를 바꾼 것은 의미가 없음.
z-index
.item:nth-child(2) {
z-index: 1;
transform: scale(2);
}
/* z-index를 설정 안하면 0이므로, 1만 설정해도 나머지 아이템을 보다 위로 올라온다 */z-index로 Z축 정렬을 할 수 있음. 숫자가 클 수록 위로 올라옴.
(position에서의 z-index랑 똑같음.)
<출처 : 1분코딩 블로그>
https://studiomeal.com/archives/197
