[CSS] Flex direction / Flex basis
2023. 6. 28. 00:11ㆍ기술 창고/CSS
728x90
SMALL
HTML 에서 태그로 생성한 구조들은 기본적으로 왼쪽에서 오른쪽으로 채워지는 순서를 가지고 있습니다.
이처럼 flex box 에도 구성물들을 넣게 되면 왼쪽에서 오른쪽으로 기본적으로 채워집니다.
이는 flex-direction 이라는 방향 속성에 행 (row)이 기본값으로 설정되어 있으며 왼쪽에서 오른쪽으로 행 방향으로 채워집니다.
열 (column)으로 설정하면 모든 내용들이 위에서 아래로 이동하게 됩니다.
flex-basis CSS를 적용하면 flex로 배치된 각 내용들이 flex-basis에서 정한 크기만큼 넓혀지거나 좁혀집니다.
만약 flex-direction 이 row 이면 주축 방향인 가로로 크기가 정해지고
column이면 주축 방향을 따라 세로로 길이가 정해집니다.
예시 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex Direction</title>
<style>
.container {
color: white;
border: 5px solid gold;
width: fit-content;
display: flex;
flex-direction: column;
}
.container > div{
flex-basis: 100px;
}
.red {background-color: #eb4d4b;}
.orange {background-color: #f0932b;}
.yellow {background-color: #f6e58d;}
.green {background-color: #6ab04c;}
.blue {background-color: #4834d4;}
.indigo {background-color: #30336b;}
.purple {background-color: #be2edd;}
</style>
</head>
<body>
<div class="container">
<div class="red">Red</div>
<div class="orange">Orange</div>
<div class="yellow">Yellow</div>
<div class="green">Green</div>
<div class="blue">Blue</div>
<div class="indigo">Indigo</div>
<div class="purple">Purple</div>
</div>
</body>
</html>
- display: flex
모든 구성물들이 들어있는 부모 태그인 container 에 display: flex 옵션을 넣어 flex box로 지정해주었습니다.
flex box 를 지정하면 기본적으로 들어있는 아이템들의 길이에 따라 지정된 태그의 너비가 결정되고 왼쪽에서 오른쪽으로 채워지는 형태를 가지게 됩니다. - width: fit-content
fit-content 옵션을 사용하면 너비가 아이템들의 너비에 맞게 영역이 맞춰집니다.
display: inline-flex를 사용해도 동일한 효과를 볼 수 있습니다. - flex-direction: column
flex의 주축 방향을 열 방향으로 바꾸었습니다.
이제 위에서 아래로 아이템들이 이동될 것입니다. - flex-basis: 100px
flex-basis는 flex 로 지정된 아이템들의 길이를 지정합니다.
direction을 column 으로 지정하였으므로 길이가 100px이 됩니다.
(반대로 row로 지정되었다면 왼쪽으로 너비가 100px이 됩니다.)
flex-basis의 경우에는 부모 태그에 적용하는 것이 아니라 자식 태그에 적용합니다.
결과
728x90
반응형
LIST
'기술 창고 > CSS' 카테고리의 다른 글
| [CSS] Flex Sizing (flex 크기 변경) (0) | 2023.07.13 |
|---|---|
| [CSS] Flex Layout - 방향 설정 (0) | 2023.07.12 |
| [CSS] Flexbox (0) | 2023.06.27 |
| [CSS] 반응형 CSS - Media Queries (0) | 2023.06.24 |
| [CSS] 반응형(Responsive) 웹 사이트 만드는 방법 (0) | 2023.06.24 |