flexbox - 1
FLEX-BOX
- Rule 01. 레이아웃에서 열이될 box에게 직접 명령하지 않는다.
자식들의 직접적인 부모요소에게 명령한다.
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>body {
display: flex;
justify-content: space-between;
}
.box{
width: 200px;
height: 200px;
background-color: tomato;
}display: flex 라고 지정한다.
display: inline, inline-block, block, flex 가 들어갈수 있듯이 다양한 속성값중 하나
그래서 display: flex라고 되어있으면 div, body, section 등 어떤 태그든 그것을 flex container로 바꿔준다.
<body>
<div class="father">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>gap
기본적으로 flex container가 간격을 주도록 한다.
.father{
display: flex; /*flex container로 선언 */
gap: 10px;/*자식 요소의 간격이 10px로 선언 */
}
.box{
width: 200px;
height: 200px;
background-color: tomato;
display: block;
}역시나 레이아웃해서 정렬되는 대상이 아닌 그 부모에게 지정한다.
flex-direction
flex 컨테이너는 기본적으로 요소들이 움지깅는 방향을 바꾸는 프로퍼티를 기본으로 가지고 있다.
기본 값은 flex-direction: row; 이다.
행(row)인지 : 요소 옆에 요소가 수평적으로 위치 한다.
열(column)인지 : 요소 위에 요 소가 수직적으로 위치한다.
를 정의할 수 있다.
.father{
display: flex; /*flex container로 선언 */
flex-direction : column;
gap: 10px;/*자식 요소의 간격이 10px로 선언 */
}
row
row: 이 옵션은 아이템들을 가로 방향으로 배치 즉, flex 컨테이너 안에서 아이템들이 왼쪽에서 오른쪽으로 순서대로 배치
.container {
display: flex;
flex-direction: row; /* 아이템들을 가로로 배치 */
}column
column: 이 옵션은 아이템들을 세로 방향으로 배치 flex 컨테이너 안에서 아이템들이 위에서 아래로 순서대로 배치
.container {
display: flex;
flex-direction: column; /* 아이템들을 세로로 배치 */
}row-reverse
아이템들을 가로로 배치하되, 시작점을 우측에서부터 시작하여 왼쪽 방향으로 배치
.container {
display: flex;
flex-direction: row-reverse; /* 아이템들을 가로로 배치하되, 오른쪽에서부터 왼쪽 방향으로 배치 */
}row-column
아이템들을 세로로 배치하되, 시작점을 아래쪽에서부터 시작하여 위쪽 방향으로 배치
.container {
display: flex;
flex-direction: column-reverse; /* 아이템들을 세로로 배치하되, 아래쪽에서부터 위쪽 방향으로 배치 */
}Main and Cross Axis
flex에는 주축과 교차축이 있고 이는 fleex container의 direction에 따라 달라진다.
.father{
display: flex; /*flex container로 선언 */
flex-direction : column;
gap: 10px;/*자식 요소의 간격이 10px로 선언 */
}
이걸 구분하는 이유는? 당연히 아이템을 주축 기준 또는 교차축 기준으로 으로 옮기고 싶으니까
justify-content
주축을 따라 아이템을 정렬해준다.
.father{
display: flex; /*flex container로 선언 */
flex-direction : row;
justify-content: space-between;
gap: 10px;/*자식 요소의 간격이 10px로 선언 */
}| 값 | 의미 | 기본값 |
|---|---|---|
flex-start(start) | Items를 시작점으로 정렬 | flex-start |
flex-end(end) | Items를 끝점으로 정렬 | |
center | Items를 가운데 정렬 | |
space-around | 각 Item 주위에 여백을 고르게 정렬 | |
space-between | 첫 Item은 시작점에, 끝 Item은 끝점에 정렬하고 나머지 여백으로 고르게 정렬 | |
space-evenly | 모든 여백을 고르게 정렬 |
align-items
교차축을 따라 flex item을 정렬해준다.
.father{
display: flex; /*flex container로 선언 */
height: 100vh
flex-direction : row;
justify-content: space-between;
align-items: center;
gap: 10px;/*자식 요소의 간격이 10px로 선언 */
}
| 값 | 의미 | 기본값 |
|---|---|---|
stretch | Container의 교차 축을 채우기 위해 Items를 늘림 | stretch |
flex-start(start) | Items를 시작점으로 정렬 | |
flex-end(end) | Items를 끝점으로 정렬 | |
center | Items를 가운데 정렬 | |
space-around | 각 Item 주위에 여백을 고르게 정렬 | |
space-between | 첫 Item은 시작점에, 끝 Item은 끝점에 정렬하고 나머지 여백으로 고르게 정렬 | |
space-evenly | 모든 여백을 고르게 정렬 |
div 안에 숫자를 가운데 정렬
만약에 div 안에 숫자를 넣고 정렬하려면? div자체도 flex container로 선언해주면 된다.
.box{
width: 200px;
height: 200px;
background-color: tomato;
color: white;
font-size: 36px;
display: flex;
justify-content: center;
align-items: center;
}
이렇게 보면 father class를 가진 div도 자기만의 주축과 교차축이 있고 vox도 주축과 교차축이 있다.
flex-wrap
20개의 box를 만들어보자
box의 width: 200px; height: 200px; 임에도 불구하고 찌그러져있다.
이럴때 사용하는것이 flex-wrap 이다.
flex-wrap은 컨테이너가 아이템들을 한 줄인지 또는 여러줄인지를 제어한다.
역시나 flex-wrap도 직속 부모(?)에게 전달하면 된다.
.father{
display: flex;
height: 20vh;
flex-direction : row;
justify-content: space-between;
align-items: center;
gap: 10px;
flex-wrap: wrap;/* 기본값은 nowrap인데 wrap으로 선언 */
}
| 값 | 의미 | 기본값 |
|---|---|---|
nowrap | 모든 Items을 여러 줄로 묶지 않음(한 줄에 표시) | nowrap |
wrap | Items을 여러 줄로 묶음 | |
wrap-reverse | Items을 wrap의 역 방향으로 여러 줄로 묶음 |
flex-wrap이 변경하는 것은 단 한가지 이다.
- 항목을 여러 줄로 표시하거나
- 한 줄로 표시하거나
FLEX-FLOW
이건 단축 속성이다. 하나의 속성으로 flex-direction과 flex-wrap를 설정해준다.
flex-flow: <'flex-direction'> <flex-wrap>
예를 들면 이렇게 쓴다.
.father{
display: flex;
height: 20vh;
justify-content: space-between;
align-items: center;
gap: 10px;
flex-flow: row wrap;/* flex-direction: row; flex-wrap: wrap */
}