Orchemi

Orchemi

I start where others stop.

[Bootstrap] Utility 3. Flex

작성:    

업데이트:

카테고리:

태그: , ,

Flex

앞서 다룬 Grid layout과 함께 반응형 웹을 만들 때 정말 유용하고 다양하게 사용되는 utility이다.


Flex의 선언

CSS에서는 부모 태그에 display: flex;를 부여함으로써 하위에서 flex로 작업하겠다는 것을 선언한다. 부트스트랩의 flex utility도 같은 방식이다. 앞서 다룬 display에서 d- prefix에 display 속성들을 붙이며 display를 지정했다.


d-flex         : div처럼 작용
d-inline-flex  : span처럼 작용

<!-- breakpoint infix도 사용할 수 있다. -->

d-lg-flex      : lg 이상의 viewport에서 flex를 지정


direction

item들의 main axis를 가로(default)로 할지, 세로로 할지, 배치 순서는 어떻게 할지를 결정한다. 기존 css에서는 이렇게 했다.

flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;

이 역시 독보적인 속성 이름이므로 굳이 direction에 대한 언급 없이 앞에 flex- prefix 뒤에 속성명으로만 표현한다.

flex-row
flex-row-reverse
flex-column
flex-column-reverse


예시 코드를 살펴보자.

<div class="d-flex flex-row bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse bd-highlight">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>

그리고 그 결과이다.

image


뭐 역시나 breakpoint마다 width infix를 넣어 어떤 viewport에서 어떻게 설정할지도 결정할 수 있다.

flex-sm-column
flex-sm-column-reverse
flex-md-row
flex-md-row-reverse


Justify content

main axis에 대해 item들의 배치를 결정한다.

< flex- >
justify-content-start     : 시작점으로 밀착
justify-content-end       : 종료점으로 밀착
justify-content-center    : 중앙으로 집결

< space- >
justify-content-between   : 맨 양쪽 바깥여백 없음
justify-content-around    : item마다 같은 여백을 가짐 (사이 공간 여백 나눠가짐)
justify-content-evenly    : 바깥 여백이든 사이 여백이든 여백은 다 같은 크기

위와 같이 사용한다. flex-나 space- 같은 prefix를 붙이는 속성들인데, 마찬가지로 너무나 독보적인 속성명이고 서로 구분이 되므로 잡다한 걸 빼고 justify-content- 뒤에 바로 붙여주는 것이다.

역시 마찬가지로 breakpoint infix 사용이 가능하다.


Align items

justify-content가 main axis 위에서 item 위치를 조정했다면, align-items는 cross axis 위에서 item 위치를 조정한다. 자세한 설명은 Responsive Web 카테고리의 flex 부분에서 다루었다.


align-items-start     : 시작점으로 밀착
align-items-end       : 종료점으로 밀착
align-items-center    : 중앙으로 집결
align-items-baseline  : item 내부 content의 baseline에 모든 item을 맞춤
align-items-stretch   : container의 크기만큼 item을 꽉 채움

image

align-items- prefix 뒤에 속성명을 붙이며 사용한다. 역시나 breakpoint infix를 사용할 수 있다.


Align self

align-items가 display: flex를 부여한 container (부모 태그)에 같이 부여해서 container 내부의 item들을 한 번에 조정했다면, align-self는 item(자식 태그)에 부여해서 독자적인 배치를 가지도록 하는 속성이다.

<div class="align-self-start">Aligned flex item</div>
<div class="align-self-end">Aligned flex item</div>
<div class="align-self-center">Aligned flex item</div>
<div class="align-self-baseline">Aligned flex item</div>
<div class="align-self-stretch">Aligned flex item</div>

image

breakpoint infix 사용 가능하다. 이제는 두말하면 잔소리다.


고급 속성

자주 쓰이지는 않지만 정리해본 고급적인 속성들이다.


Fill

item의 내부 content에 맞춰 여백을 모두 같게 설정하는 속성이다. flex-fill 로 사용한다.

<div class="d-flex bd-highlight">
  <div class="p-2 flex-fill bd-highlight">Flex item with a lot of content</div>
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
</div>

image

이제는 얘기 안하면 breakpoint infix 사용 안 되는 특이한 예외인 것이라고 생각하자. 다 사용할 수 있어서 이게 낫겠다.


Grow

사용 가능한 여백을 채우는데 사용되는 속성이다. 특히 flex-grow-1을 한 태그에서 사용하면 다른 태그들의 content가 안전하게 item 내에 있도록 보장하면서도 남은 여백을 모두 차지한다. 아래 예시를 보자.

<div class="d-flex bd-highlight">
  <div class="p-2 flex-grow-1 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Third flex item</div>
</div>

image


Shrink

flex-shrink 속성은 필요하다면 wrapping을 통해 shrink, 즉 수축할 수 있도록 하는 속성이다.

<div class="d-flex bd-highlight">
  <div class="p-2 w-100 bd-highlight">Flex item</div>
  <div class="p-2 flex-shrink-1 bd-highlight">Flex item</div>
</div>

첫 번째 item이 w-100을 가지면서 모두 공간을 모두 차지해야 하는데, 두 번재 item이 있기 때문에 줄어들어있는 상태이다. 여기서 두 번째 item에 flex-shrink-1이 없었다면 두 번째 item은 한 줄로 표시되며 첫 번째 item은 더 좁은 width를 가지게 될 것이다.

하지만 flex-shrink-1로 자동 wrapping이 되어 shrink, 즉 수축되었다.

image


Auto margins

item 태그 내에서 사용되며, item의 여백을 자동으로 설정해준다.

<div class="d-flex bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
</div>

<div class="d-flex bd-highlight mb-3">
  <div class="me-auto p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
</div>

<div class="d-flex bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="ms-auto p-2 bd-highlight">Flex item</div>
</div>

결과를 보며 코드를 해석해보자.

image

보통 첫 번째 코드처럼 flex-start 쪽으로 밀착되는 것이 일반적인 상황이다. 그런데, 두 번째 코드는 첫 번째 item에 me-auto 속성이 들어간다. end쪽, 즉 오른쪽에 margin auto를 주겠다는 말이다. 그래서 두 번째 결과 사진을 보면 첫 번째 태그 이후에 me-auto로 부여된 margin이 있고, 그 이후에 2, 3번째 item이 있는 것을 알 수 있다.

마찬가지로 세 번째 상황은 세 번째 item이 ms-auto start(왼쪽)에 margin auto를 가져 1, 2번째 item이 start쪽으로 밀착되고 3번째 item은 end쪽으로 밀착되었다.

이는 x축 뿐만이 아니라, my, mt, mb 등을 통해 세로로도 적용이 가능하다. 그리고 breakpoint infix 사용 예시가 없는 것으로 보아 적용이 불가능한 모양이다.


Wrap

item이 container를 넘어갔을 때 아래 줄로 item을 넘길지 아니면 container를 넘도록 할지를 결정하는 속성이다. default로는 wrap이 설정되어 있으며, nowrap을 설정하는 코드는 아래와 같다.

<div class="d-flex flex-nowrap">...</div>

image


<div class="d-flex flex-wrap">...</div>

image

자동 줄 바꿈이 잘 되는 것을 확인할 수 있다.


wrap/nowrap만 결정하는 것이 아니라 flex-wrap-reverse를 통해 wrapping의 방향도 바꿀 수 있다.

<div class="d-flex flex-wrap-reverse">...</div>

image

breakpoint infix 사용이 가능하다.


Order

item의 순서을 임의로 조정하는 데에 사용된다. order-0 부터 order-5까지 있으며, breakpoint infix 사용이 가능하다.


Align content

단일 행일 때에는 적용이 되지 않는 다행 전용 속성이다.

<!-- flex- -->
align-content-start
align-content-end
align-content-center

<!-- space- -->
align-content-between
align-content-around

<!-- etc -->
align-content-stretch

align-items보다 align-content에 대한 속성이 더 다양하고, justify-content처럼 space를 기준으로 한 설정도 가능하기 때문에 유용하게 사용될 수 있다. breakpoint infix를 사용할 수 있다.


REFERENCE

댓글남기기

참고