📢 들어가며
flex를 자주 사용하긴 하지만 flex-basis, flex-grow, flex-shrink에 대해서 정확하게 알지 못한 채로 사용했었다. 그래서 이참에 3가지에 대해서 정리를 해보려고 한다.
🎃 주 축(main-axis)와 교차 축(cross-aixs)
먼저 주축과 교차축에 대한 개념을 알고 있어야 한다. flex는 방향에 따라 주 축과 교차 축이 결정된다.
왼쪽 이미지가 row, 오른쪽 이미지가 column일 때의 주 축과 교차 축이다.
🎁 justify-content와 align-items
justify-content는 주축을 기준으로 컨테이너 안에 남는 공간이 존재할 때 어떻게 분배, 정렬할지를 결정한다.
align-items는 교차 축을 기준으로 아이템을 정렬한다. 기본 값은 stretch이기 때문에 다른 설정이 없다면 컨테이너의 교차 축 방향으로 동일하게 확대된다.
아래는 코드
코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.flex {
display: flex;
width: 100px;
height: 100px;
}
p {
background: rgb(255, 117, 117);
margin: 0;
}
</style>
</head>
<body>
<div class="flex">
<p>1</p>
<p>1</p>
<p>1</p>
</div>
</body>
</html>위의 코드를 실행해보면 아래와 같이 각 아이템의 높이가 컨테이너의 높이와 동일하게 확대된다.
🎄 flex-basis
flex-basis는 컨테이너의 자식 요소에게 할당하는 CSS 속성이다. 기본값은 auto이다.
flex-basis는 다음과 같은 값으로 설정이 가능하다.
- <lengh>
- auto
- fill
- max-content
- min-content
- fit-content
- 등
먼저 auto에 대해서 알아보겠다. auto로 설정된 경우 다음과 같은 순서로 결정된다.
- width / height 값이 존재하면 해당 사이즈로 결정
- 명시적인 사이즈가 없는 경우 컨텐츠 크기로 결정
- 단어에 공백이 존재하지 않는 경우에는 컨테이너의 사이즈를 넘길 수도 있다.
- 단어에 공백이 존재하는 경우에는 컨테이너 사이즈를 넘어서게 되면 줄바꿈이 된다.
아래는 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.flex {
display: flex;
width: 100px;
height: 100px;
}
p {
background: rgb(255, 117, 117);
margin: 0;
}
</style>
</head>
<body>
<div class="flex">
<p>abcdefghijklmnopqrstu</p>
<p>1</p>
<p>1</p>
</div>
</body>
</html>위의 코드를 실행해보면 공백이 존재하지 않기 때문에 컨테이너의 width를 넘어서게 된다.
만약 공백을 추가하게 된다면 아래 이미지 처럼 공백은 줄바꿈이 되어 컨테이너 사이즈에 맞춰서 최대한 작아지게 된다.
아래는 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.flex {
display: flex;
width: 100px;
height: 100px;
}
p {
background: rgb(255, 117, 117);
margin: 0;
width: 20px;
}
</style>
</head>
<body>
<div class="flex">
<p>1</p>
<p>1</p>
<p>1</p>
</div>
</body>
</html>위의 코드에는 width를 추가하였다. flex-basis가 auto이기 때문에 각 아이템들은 width 만큼의 너비를 갖는다.
만약 각 width / height의 총합이 컨테이너의 사이즈를 넘어서게 되는 경우 이후 알아볼 flex-shrink 에 따라 사이즈가 결정된다.
flex-basis에 직접 값을 할당할 수도 있다. 만약 flex-basis와 width / height 가 동시에 설정되어 있다면 flex-basis 값을 우선한다.
😥 한글과 영어 숫자의 차이
위에서 아이템의 사이즈를 결정할 때 공백이 존재하지 않는 경우에는 컨테이너의 사이즈를 넘어서더라도 줄바꿈이 되지 않는 다고 했었다.
하지만 여기서 주의해야하는 문제가 존재한다. 바로 한글이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.flex {
display: flex;
width: 100px;
height: 100px;
}
p {
background: rgb(255, 117, 117);
margin: 0;
}
</style>
</head>
<body>
<div class="flex">
<p>아주아주아주긴굉장히긴문자열</p>
<p>1</p>
<p>1</p>
</div>
</body>
</html>위 코드를 보면 별다른 설정이 없는 것을 확인할 수 있다. 차이는 영어대신 한글만 사용했을 뿐이다.
아래의 결과를 확인해보면 공백이 존재하지 않지만 텍스트가 줄바꿈 되는 것을 확인할 수 있다.
이는 한글과 영어와의 차이점에서 온다. 한글은 음절경계마다 줄바꿈 기회가 허용되기 때문에 공백이 전혀 없어도 줄바꿈이 된다. 하지만 영어의 경우에는 알파벳 안에서 줄바꿈이 되지 못한다.
🙄 정리
- flex를 사용하는 경우 방향에 따라 주 축과 교차 축이 정해진다.
- justify-content는 주 축 방향으로 정렬
- align-items는 교차 축 방향으로 정렬
- flex-basis와 같은 사이즈를 결정할때는 주 축 방향의 사이즈를 결정
'CSS' 카테고리의 다른 글
| [CSS] Writing Mode (0) | 2025.09.13 |
|---|---|
| [CSS] flex-basis, flex-shrink, flex-grow 활용 -2 (0) | 2025.07.16 |
| [CSS] flex-shrink, flex-grow 알아보기 -2 (0) | 2025.07.12 |
