1. Flex Box Layout : 플렉스 박스 레이아웃이란?
그리드 레이아웃을 기본으로 하여 플렉스 박스를 원하는 위치에 배치하는 레이아웃을 말한다.
플렉스 박스 레이아웃은 플렉스 항목이 플렉스 컨테이너로 묶여 있는 형태로 존재한다.
플렉스 컨테이너 안에서 플렉스 항목을 배치하는 기본 방향이 설정되어 있는데
왼쪽에서 오른쪽으로 향하는 주축과 위에서 아래로 향하는 교차축이 있다.
1️⃣ 플렉스 항목 : 플렉스 컨테이너에 담기는 웹 요소
2️⃣ 플렉스 컨테이너 : 웹 요소를 플렉스 박스 레이아웃에 적용하기 위해 묶는 틀
3️⃣ 주축 : 플렉스 컨테이너 안에서 플렉스 항목을 배치하는 기본 방향(왼 👉 오)
4️⃣ 교차축 : 교차축은 주축과 교차하는 방향(위 👉 아래)
2. display 속성 : 플렉스 컨테이너 지정하기
display : flex | inline-flex
1️⃣ flex : 플렉스 박스를 박스 레베 요소로 정의한다. (너비 100%)
2️⃣ inline-flex : 플렉스 박스를 인라인 레벨 요소로 정의한다.
플렉스 박스 레이아웃을 사용하기 위해서는 웹 요소를 먼저 플렉스 컨테이너로 묶어 줘야 한다.
즉 웹 요소를 플렉스 박스 레이아웃을 통해 배치하기 위해서는 이들을 한 번 감싸주는 부모 요소를 만들어
해당 부모 요소를 플렉스 컨테이너로 만들어야 한다.
3. flex-direction 속성 : 플렉스 방향 지정하기
flex-direction : row | row-reverse | column | column-reverse
1️⃣ row : 기본 값이다. 주축을 가로로 교차축을 세로로 지정한다.
플렉스 항목은 주축의 시작점(왼)에서 끝점(오른)으로 배치된다.
2️⃣ row-reverse : 주축을 가로로 교차축을 세로로 지정한다.
플렉스 항목은 주축의 끝점에서 시작점으로 배치된다.
3️⃣ column : 주축을 세로로 교차축을 가로로 지정한다.
플렉스 항목은 주축의 시작점에서 끝점으로 배치된다.
4️⃣ column-reverse : 주축을 세로로 교차축을 가로로 지정한다.
플렉스 항목은 주축의 끝점에서 시작점으로 배치된다.
1️⃣ row 방향
<style>
.flex-container {
display: flex;
border: 2px solid black;
width: 800px;
height: 800px;
}
.flex-container > div {
width: 200px;
height: 200px;
padding: 1em;
}
.box1 {
background-color: crimson;
}
.box2 {
background-color: chocolate;
}
.box3 {
background-color: goldenrod;
}
.box4 {
background-color: teal;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="box1"><h2>box 1</h2></div>
<div class="box2"><h2>box 2</h2></div>
<div class="box3"><h2>box 3</h2></div>
<div class="box4"><h2>box 4</h2></div>
</div>
</body>
주축이 가로로 지정되어 있고, 플렉스 항목들은 시작점에서 끝점으로 배치된다.
2️⃣ row-reverse 방향
.flex-container {
display: flex;
border: 2px solid black;
width: 800px;
height: 800px;
flex-direction: row-reverse;
}
row 와 마찬가지로 주축을 가로로 두지만, 끝점부터 시작하기 때문에 배치 순서가 끝점부터 1번 박스의 시작이다.
3️⃣ column 방향
.flex-container {
display: flex;
border: 2px solid black;
width: 800px;
height: 800px;
flex-direction: column;
}
주축을 세로 방향으로 시작하고, 시작점에서부터 배치를 하기 때문에 순서대로 세로 정렬하게 되었다.
4️⃣ column-reverse 방향
.flex-container {
display: flex;
border: 2px solid black;
width: 800px;
height: 800px;
flex-direction: column-reverse;
}
column 과 마찬가지로 주축이 세로로 지정되지만, 플렉스 항목의 시작은 끝점부터이기 때문에 1번 박스가 아래쪽에 배치되었다.
📌 플렉스 컨테이너의 크기
플렉스 항목의 크기보다 플렉스 컨테이너 크기가 우선되기 때문에 플렉스 항목은 플렉스 컨테이너 크기에 맞춰 변경될 수 있다.
다음과 같이 플렉스 컨테이너의 크기를 200px 로 줄였을 때에 플렉스 항목의 크기를 살펴보자.
.flex-container {
display: flex;
border: 2px solid black;
width: 600px;
height: 600px;
}
플렉스 항목의 너비와 높이 값은 변화를 주지 않았다.
하지만 적용된 스타일을 확인해 보면 너비가 118px 로 전체 너비가 150px 로 변경되었다.
즉 플렉스 항목의 너비보다 플렉스 컨테이너의 크기가 우선되어
항목의 크기가 줄어든 것임을 확인할 수 있다.
이는 후술할 flex-wrap 의 기본 값인 no-wrap 에 의한 스타일 적용이다.
4. flex-wrap 속성 : 플렉스 항목을 한 줄 또는 여러 줄로 배치하기
flex-wrap : nowrap | wrap | wrap-reverse
1️⃣ nowrap : 기본 값이다. 플렉스 항목을 한 줄에 표시한다.
2️⃣ wrap : 플렉스 항목을 여러 줄에 표시한다.
3️⃣ wrap-reverse : 플레스 항목을 여러 줄에 표시하되 기존 방향과 반대로 배치한다.
1️⃣ nowrap
<style>
.flex-container {
display: flex;
border: 2px solid black;
width: 600px;
height: 600px;
}
.flex-container > div {
width: 200px;
height: 200px;
padding: 1em;
}
.box1 {
background-color: crimson;
}
.box2 {
background-color: chocolate;
}
.box3 {
background-color: goldenrod;
}
.box4 {
background-color: teal;
}
</style>
항목들을 한 줄에 표시하기 위하여 항목의 크기를 임의로 줄여서 한 줄에 넣었다.
2️⃣ wrap
.flex-container {
display: flex;
border: 2px solid black;
width: 600px;
height: 600px;
flex-wrap: wrap;
}
플렉스 항목을 여러 줄에 표시할 수 있기 때문에 플렉스 항목에 설정한 너비와 높이를 보장받게 되었다.
3️⃣ wrap-reverse
.flex-container {
display: flex;
border: 2px solid black;
width: 600px;
height: 600px;
flex-wrap: wrap-reverse;
}
기존의 배치 방향은 가로축을 주축으로 하여 시작점부터 끝점으로 배치가 되었다면,
wrap-reverse 의 배치 방향은 주축의 방향은 그대로지만 아래에서부터 배치가 되었음을 확인할 수 있다.
5. flex-flow 속성 : 플렉스 방향과 여러 줄의 배치를 한꺼번에 지정하기
flex-flow : <플렉스 방향> <플렉스 줄 배치>
flex-flow 속성은 flex-direction 속성과 flex-wrap 속성을 합친 속성이라고 생각하면 된다.
따라서 flex-flow 속성의 기본 값은 flex-flow : row nowrap 이다.
<style>
.flex-container {
display: flex;
border: 2px solid black;
width: 600px;
height: 600px;
flex-flow: row-reverse wrap;
}
.flex-container > div {
width: 200px;
height: 200px;
padding: 1em;
}
.box1 {
background-color: crimson;
}
.box2 {
background-color: chocolate;
}
.box3 {
background-color: goldenrod;
}
.box4 {
background-color: teal;
}
</style>
6. order 속성 : 플렉스 항목의 배치 순서 바꾸기
order : 0 | 숫자
플렉스 항목은 기본적으로 코드 상에 입력한 순서대로 주축을 따라 배치되지만
order 속성을 활용하여 배치를 임의로 변경할 수 있다.
기본 값은 0 으로 소스에 입력한 순서대로 배치되고 양수 입력 시 그 순서대로 배치가 된다.
음수 값을 지정하려는 경우에는 0으로 취급하기 때문에 양수 입력을 하도록 하자.
<style>
.flex-container {
display: flex;
border: 2px solid black;
width: 600px;
height: 600px;
}
.flex-container > div {
width: 200px;
height: 200px;
padding: 1em;
}
.box1 {
background-color: crimson;
order: 2;
}
.box2 {
background-color: chocolate;
order: 4;
}
.box3 {
background-color: goldenrod;
order: 1;
}
.box4 {
background-color: teal;
order: -3;
}
</style>
박스 4번은 음수로 지정하였기 때문에 0이 되어 가장 앞부분에 위치하게 되었고,
나머지는 order 속성 값으로 준 순서에 따라 배치가 되었다.
7. flex 속성 : 플렉스 항목 크기 조절하기
flex : [<flex-grow> <flex-shrink> <flex-basis>] | auto | initial
1️⃣ flex-grow : 플렉스 항목의 너비를 얼마나 늘일지 숫자로 지정한다.
2️⃣ flex-shrink : 플렉스 항목의 너비를 얼마나 줄일지 숫자로 지정한다.
3️⃣ flex-basis : 플렉스 항목의 기본 크기를 지정한다.
4️⃣ auto : 플렉스 컨테이너 공간에 따라 늘이거나 줄인다.
5️⃣ initial : 기본 값으로 플렉스 컨테이너 공간이 부족한 경우, 최소 크기까지 줄인다.
<style>
.flex-container {
display: flex;
border: 2px solid black;
width: 600px;
height: 600px;
flex-wrap: wrap;
}
.flex-container > div {
width: 200px;
height: 200px;
padding: 1em;
}
.box1 {
background-color: crimson;
flex: 1 1 0;
}
.box2 {
background-color: chocolate;
flex: 3 3 0;
}
.box3 {
background-color: goldenrod;
}
.box4 {
background-color: teal;
}
</style>
'CSS' 카테고리의 다른 글
| 플렉스 박스 항목 배치 (0) | 2022.10.31 |
|---|---|
| 미디어 쿼리 (0) | 2022.10.30 |
| 가변 그리드 레이아웃 (0) | 2022.10.30 |
| CSS Diner : selector 연습하기 (21 ~ 32번) (0) | 2022.10.30 |
| CSS Diner : selector 연습하기 (11 ~ 20번) (1) | 2022.10.30 |
