flexbox
컨셉1. 컨테이너에 적용되는 속성, 아이템에 적용되는 속성
컨테이너에 적용되는 속성
displayflex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content
아이템에 적용되는 속성
orderflex-growflex-shrinkflexalign-slef
컨셉2. 중심축(main axis)과 반대축(cross axis)이 존재한다.
- 수직축과 수평축이 존재한다.
- 수직축은 위에서 아래로 정렬, 수평축은 왼쪽에서 오른쪽으로 정렬이 normal-flow이다.
- 수직축이 중심축일 때는 수평축이 반대축이 된다. (같은 논리로 반대로도 생각할 수 있다.)
flex 속성 정리
display: flex; : 현재 컨테이너를 플렉스 박스로 지정한다.
flex-direction
flex-direction: column: 아이템들을 왼쪽을 기준으로 가로로 정렬한다. (기본값) (왼쪽에서 오른쪽으로)flex-direction: column-reverse: 아이템들을 오른쪽을 기준으로 가로로 정렬한다. (순서가 바뀐다. 오른쪽에서 왼쪽으로)flex-direction: column: 아이템들을 위를 기준으로 세로로 정렬한다. (위에서 아래로)flex-direction: column-reverse: 아이템들을 아래를 기준으로 세로로 정렬한다. (순서가 바뀐다. 아래에서 위로)
flex-wrap
flex-wrap: nowrap: 윈도우가 작아져서 한줄에 꽉차도 아이템 사이즈를 줄여가며 한줄에 유지된다.flex-wrap: wrap: 윈도우가 작아저서 한줄에 꽉차면 아이템들을 적절한게 다음줄로 넘긴다.
flex-flow
flex-direction 속성과 flex-wrap 속성을 한번에 작성하게 한다.
- ex)
flex-flow: column wrap: 가로정렬, 랩핑
justify-content
중심축에서 아이템들을 어떻게 배치할지 지정한다.
flex-direction 속성의 column , low 기준에 맞춰서 배치된다.
justify-content: flex-start:column이면 왼쪽에 붙여서,row면 위에 붙여서 배치한다.justify-content: flex-end:column이면 오른쪽에 붙여서,row면 아래에 붙여서 배치한다.justify-content: center:column이면 가로로 가운데 정렬,row이면 세로로 가운데 정렬한다.justify-content: space-around: 화면에 맞추어 아이템들 사이에 공간이 생긴다. (왼쪽, 오른쪽 끝은 작은 공간, 사이들은 조금더 큰 공간)justify-content: space-between: 화면에 맞추어 아이템들 사이에 공간이 생긴다. (왼쪽, 오른쪽 끝에 공간이 없다.)justify-content: space-evenly: 화면에 맞추어 아이템들 사이에 공간이 생긴다. (왼쪽, 오른쪽 끝 공간, 아이템들 사이 공간 모두 공간의 사이즈가 동일하다.)
align-items
반대축에서 아이템들을 어떻게 배치할지 지정한다.
flex-direction 속성의 column , low 기준의 반대축에 대해서 배친된다.
align-items: center:column이면 세로로 가운데 정렬,row이면 가로로 가운데 정렬한다.align-items: baseline: 아이템들이 서로 크기가 다를 때 텍스트를 기준으로 정렬해준다.align-items: space-around: 화면에 맞추어 아이템들 사이에 공간이 생긴다. (왼쪽, 오른쪽 끝은 작은 공간, 사이들은 조금더 큰 공간)align-items: space-between: 화면에 맞추어 아이템들 사이에 공간이 생긴다. (왼쪽, 오른쪽 끝에 공간이 없다.)align-items: space-evenly: 화면에 맞추어 아이템들 사이에 공간이 생긴다. (왼쪽, 오른쪽 끝 공간, 아이템들 사
아이템에 적용되는 속성
order: 2: 아이템의 순서를 지정할 수 있다. (거희 사용하지 않는다.)flex-grow: 1: 윈도우가 커질 때 윈도우 크기에 맞춰서 아이템들이 꽉채워진다. 각 아이템별로 숫자를 통해서 비례적으로 지정할 수 있다.flex-shrink: 1: 윈도우가 작아질 때 윈도우 크기에 맞춰서 아이템들이 꽉채워진다. 각 아이템별로 숫자를 통해서 비례적으로 지정할 수 있다.flex-basis: 10%: 윈도우가 커지거나 작아질 때 윈도우 크기에 맞춰서 아이템들이 꽉채워진다. 각 아이템별로 퍼센트를 통해서 비례적으로 지정할 수 있다. (flex-grow, flex-shrink 를 한번에 사용하는 것이다.)align-slef: cnter: 아이템별로 각각 정렬을 할 수 있다. (반대축 기준으로)
실습코드
<!DOCTYPE html>
<html lang="ko">
<head>
<link rel="stylesheet" href="./index.css" />
<title>flex</title>
</head>
<body>
<div class="container">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
<div class="item item6">6</div>
<div class="item item7">7</div>
<div class="item item8">8</div>
<div class="item item9">9</div>
<div class="item item10">10</div>
</div>
</body>
</html>
.container {
background-color: beige;
height: 100vh;
display: flex;
flex-direction: row; /*방향과 중심축 결정*/
/* flex-wrap: wrap; 한줄에 가득차면 다음줄로 넘기기 */
/* flex-flow: column wrap; */ /*flex-direction과 flex-wrap을 동시에 적용*/
/*아이템을 어떻게 배치할 것인지*/
/* justify-content: space-between; 중심축 기준 */
/* align-items: center; 반대축 기준 */
/* align-content: space-between; 반대축을 중심축처럼 생각하고 어떻게 배치할지*/
}
.item {
width: 100px;
height: 100px;
border: 1px solid black;
}
.item1 {
background: #ef5350;
flex-grow: 3;
}
.item2 {
background: #ff7043;
flex-grow: 1;
}
.item3 {
background: #ffca28;
flex-grow: 1;
}
.item4 {
background: #66bb6a;
flex-shrink: 1;
}
.item5 {
background: #26c6da;
flex-shrink: 2;
}
.item6 {
background: #42a5f5;
}
.item7 {
background: #3f51b5;
}
.item8 {
background: #7e57c2;
flex-basis: 60%;
}
.item9 {
background: #ab47bc;
}
.item10 {
background: #9e9e9e;
}
flex 연습하기 사이트
console.log(noah(🍕 , 🍺)); // true