CSS 심화 공부(10) - flex item 속성(4) : flex basis

basis

기준 (단위), 기반, 기초

---

flex-basis란?

이름에서 알 수 있듯이 CSS 플렉스 박스 레이아웃에서 플렉스 아이템의 초기(기초) 크기를 설정하는 속성이다.

즉 아이템의 기본 크기를 결정한다.

 

flex-basis의 기본 개념

기본값

• : flex-basis의 기본값은 auto이다. 즉 아이템의 크기가 내용물의 크기에 따라 자동으로 결정된다는 의미이다.

주축 방향 크기

• flex-direction 속성에 따라 주축(main axis) 방향의 크기를 설정한다.
• flex-direction: row; (기본값)에서는 아이템의 너비를 설정한다.
• flex-direction: column;에서는 아이템의 높이를 설정한다.

flex-basis의 속성 값

• auto : 아이템의 크기가 내용물의 크기에 따라 자동으로 결정된다.
• content : 아이템의 크기가 내용물의 크기에 따라 자동으로 결정됩니다. auto와 유사하지만, 특정 상황에서 차이가 발생할 수 있다.
• 길이 값 : px, em, % 등과 같은 길이 단위를 사용하여 아이템의 크기를 명시적으로 설정한다.
• 0 : 아이템의 크기를 0으로 설정한다.

1. auto(자동) 사용

기본적으로 auto로 설정되어 있어서 아이템에 설정된 크기만큼을 초기 크기로 가지게 된다. 만약에 따로 크기를 설정하지 않으면 내용(content)의 크기만큼 크기를 가진다.

<div class="container">
  <div class="item item1">아이템 1 (200px)</div>
  <div class="item item2">아이템 2 (내용물 크기)</div>
</div>

.container {
  display: flex;
  border: 1px solid black;
}

.item {
  border: 1px solid red;
}

.item1 {
  width: 200px; /* 명시적인 너비 설정 */
}

 

 

.item1은 width: 200px;로 명시적인 너비가 설정되어 있다.

따라서 flex-basis: auto; (기본값)는 width 값을 사용하여 초기 크기를 200px로 설정한다.

 

.item2는 width가 설정되지 않았다. 따라서 flex-basis: auto;는 내용물 "아이템 2"의 크기에 따라 초기 크기를 자동으로 결정한다.

 

2. flex-basis에 길이 값 사용

따로 크기를 설정했다면 그 크기를 기본 값으로 가진다.

<div class="container">
  <div class="item" style="flex-basis: 150px;">아이템 1 (150px)</div>
  <div class="item" style="flex-basis: 300px;">아이템 2 (300px)</div>
</div>

.container {
  display: flex;
  border: 1px solid black;
}

.item {
  border: 1px solid red;
}

 

flex-basis : 150px는 아이템 1의 초기 크기를 150px로 설정한다.

flex-basis : 300px는 아이템 2의 초기 크기를 300px로 설정한다.

flex-basis에 설정된 값이 있다면 아이템의 내용물 크기와 관계없이 초기 크기로 사용한다.

3. flex-basis: content

초기 크기를 내용물의 크기로 가진다.

<div class="container">
  <div class="item" style="flex-basis: content; width: 200px;">아이템 1</div>
  <div class="item" style="flex-basis: content;">아이템 2</div>
</div>

.container {
  display: flex;
  border: 1px solid black;
}

.item {
  border: 1px solid red;
}

 

아이템 1은 width: 200px가 설정되어 있지만, flex-basis: content;는 이를 무시하고 내용물 "아이템 1"의 크기에 따라 초기 크기를 결정한다.

아이템 2는 내용물 "아이템 2"의 크기에 따라 초기 크기를 결정한다.

4. flex-basis: 0

아이템의 초기 크기를 0으로 설정한다.

<div class="container">
  <div class="item" style="flex-basis: 0; flex-grow: 1;">아이템 1 (flex-grow: 1)</div>
  <div class="item" style="flex-basis: 0; flex-grow: 2;">아이템 2 (flex-grow: 2)</div>
</div>

 

.container {
  display: flex;
  border: 1px solid black;
}

.item {
  border: 1px solid red;
}

 

간단하게 말하자면 주축(main axis) 방향의 크기를 0으로 설정한다는 얘기다.

flex-direction: row; (기본값)에서는 아이템의 너비가 0이 되고 column에서는 높이가 0이 된다.

 

즉 이런식으로 컨텐츠만큼의 크기를 가지게 된다.