티스토리툴바

Front End/HTML, CSS

Flexbox

Flexbox

Flexbox로 레이아웃을 구성한다는 것은 박스를 유연하게 늘리거나 줄여 레이아웃을 잡는 방법을 뜻함.

display: flex; 분석

display: flex;는 부모 박스 요소에 적용하여 자식 박스의 방향과 크기를 결정하는 레이아웃 구성 방법임.

<main>
	<div>box1</div>
	<div>box2</div>
	<div>box3</div>
</main>
main {
  border: 1px dotted red;
}

div {
  border: 1px solid green;
}

* {
  margin: 10px;
  padding: 10px;
}

위의 예제처럼 <div> 요소들은 별다른 설정을 하지 않으면 위쪽에서부터 세로로 정렬되며, 가로로 넓게 공간을 차지한다. 이 때, 부모 요소인 <main>에 display: flex; 속성을 적용하게 되면..

자식 요소인 <div>가 왼쪽부터 가로로 정렬됨과 동시에 내부 콘텐츠만큼 크기를 차지하는 것을 알 수 있음.

부모 요소에 적용해야 하는 Flexbox 속성들

flex-direction : 정렬 축 정하기

자식 요소를 정렬 할 정렬 축을 정한다. 기본값은 row (가로 정렬)

flex-wrap : 줄 바꿈 설정하기

자식 요소의 크기가 부모 요소의 크기를 넘으면 자동으로 줄바꿈을 할 것인지 정한다. 기본값은 nowrap (줄 바꿈을 하지 않음)

justify-content : 축 수평 방향 정렬

자식 요소들을 축(flex-direction)의 수평 방향으로 어떻게 정렬 할 것인지 정한다. 축이 가로row라면 가로의 정렬 방법을, 세로column라면 세로의 정렬 방법을 결정한다.

  • flex-direction : row 인 경우 ↔
  • flex-direction : column 인 경우 ↕️

align-items : 축 수직 방향 정렬

자식 요소들을 축(flex-direction)의 수직 방향으로 어떻게 정렬 할 것인지 정한다. 축이 가로row라면 세로의 정렬 방법을, 세로column라면 가로의 정렬 방법을 결정한다.

  • flex-direction : row 인 경우 ↔
  • flex-direction : column 인 경우 ↕️

자식 요소에 적용해야 하는 Flexbox 속성

flex 속성의 값

자식요소에 들어가는 flex 속성에는 세 가지 값을 지정할 수 있으며, 기본값은 flex: 0 1 auto; 이다.

flex: <grow(팽창 지수)> <shrink(수축 지수)> <basis(기본 크기)>;

grow : 팽창 지수

정렬 축 방향으로 빈 공간이 있을 때 요소의 크기가 얼마나 늘어날지 결정한다. 이 때, 실제로 결정되는 크기는 다른 자식요소의 팽창 지수와 비교하여 비율을 결정하게 된다.

  • box1만 flex-grow : 1 , 나머지 박스는 flex-grow : 0

    box1 : box2 : box3 = 1 : 0 : 0 이므로 box1이 모든 공간을 차지

  • box1, box2는 flex-grow : 1 , box3은 flex-grow : 0

    box1 : box2 : box3 = 1 : 1 : 0 이므로 box1, box2가 1:1로 공간을 차지

  • 모든 box가 flex-grow : 1

    box1 : box2 : box3 = 1 : 1 : 1 이므로 세 박스가 1:1:1로 공간을 차지

  • 팽창지수가 6 : 3 : 1

    세 박스가 각각 60% : 30% : 10%만큼 공간을 차지

이처럼 팽창지수는 자식 요소의 grow값 / 자식 요소들의 grow값의 총합 의 비율로 빈 공간을 가져가게 된다. 팽창지수는 절대적 크기가 아닌 총합에서의 비율로 빈 공간을 차지한다.

shrink : 수축 지수

grow와 반대로 요소의 크기가 줄어들어야 할 때 얼마나 줄어들지 결정한다. 수축지수 역시 비율로 적용되며 비율이 커질 수록 더 많이 줄어든다.

  • 단, grow 속성과 함께 쓰는 것은 추천되지 않는다. 수축지수는 요소의 width 값이나 basis 값에 따른 비율이므로 실제 크기를 예측하기 어렵기 때문에 비율로 레이아웃을 지정 할 경우 grow 값에 변화를 주어 작성하는 것이 좋다.

basis : 기본 크기

늘어나고 줄어드는 것과 관계 없이 요소의 기본 크기를 결정한다. grow 값이 0일 때, basis 크기를 지정하면 그 크기는 유지된다.

  • ex. grow는 0 : 1 : 1이고, box1에 flex-basis : 50px; 를 적용한 경우

    box1의 크기가 늘거나 줄지 않고 50px를 유지한다.

  • basis는 grow의 속성 값이 0인 경우에만 속성의 값이 유지된다. 만약 자식 요소의 grow 속성 값이 양수 인 경우 basis에 적용한 값보다 커질 수 있음을 명심해야 한다.
    ❓
    basis에 0과 auto를 넣었을 때의 차이점 0 : 기본 축에서 grow, shrink 설정 비율대로 자식 요소의 너비를 배분한다. → 기본 축의 전체 영역을 기준으로 배분한다. auto : 기본 축에서 요소가 차지하는 공간을 제외한 빈 공간을 설정 비율대로 배분한다.
  • width와 basis를 동시에 적용한 경우, basis가 우선된다.
  • 콘텐츠가 많아 자식 박스가 넘치는 경우, width는 정확한 크기를 보장하지 않는다.
  • basis를 사용하지 않는다면 콘텐츠가 많아 자식 박스가 넘치는 경우를 대비해 width를 max-width로 대체하여 쓸 수 있다.


Uploaded by N2T

티스토리툴바