CSS - FLOAT, FLEX BOX

저번 글에서 배웠던 Display와 Position 모두 CSS Layout technique의 종류 중 하나였다!

오늘은 조금은 성격이 다른 float와 flex box를 이용하여 CSS Layout을 다뤄보자.

CSS Layout technique 종류

• Display
• Position
• float
• Flex box
• Grid
• 기타

---

이전 글들 또는 신문 기사와 같이 이미지를 감싸는 글자들을 많이 보았을 것이다. 또는 이미지가 왼쪽, 오른쪽으로 배치가 되어 있는 것을 보았을 것이다. 이때 사용하는 것이 바로 Float이다.

• 박스를 왼쪽 혹은 오른쪽으로 이동시켜 텍스트를 포함 인라인요소들이 주변을 wrapping 하도록 함
• 요소가 Normal flow를 벗어나도록 함

• 속성
  • none: 기본 값
  • left: 요소를 왼쪽으로 띄움
  • right: 요소를 오른쪽으로 띄움

딱히 어려운 것이 없어보이니 float는 이 정도만 이해하고 넘어가자!

---

이제는 Flex box라고 하는 조금 더 간편하게 정렬할 수 있는 것을 알아보자.

우선 Flex box란 행과 열의 형태로 아이템들을 배치하는 1차원 레이아웃 모델이다

main axis(메인 축), cross axix(교차 축)을 가지고 있으며 Flex container(부모 요소), Flex item(자식 요소)로 구성되어 있다.

아래 그림을 보면 더 이해가 잘될 것이다.

flex box 구성

• 여기서 flex-direction은 row이다.

문득 궁금한게 이전에 배웠던 technique들을 가지고도 충분히 정렬할 수 있는데 왜 flex box를 배우는 걸까?

이전에 배웠던 Normal Flow를 벗어나는 수단은 'Float 또는 Position'을 이용할 수 있었다.

위 2개를 이용했을 때 수동 값 부여 없이 수직정렬, 아이템 간격 동일 배치가 정말 어렵게 느껴졌다. 수동 값으로 맞춰주면 다른 거와 부딪힐 때도 있고 삐뚤삐뚤하고..

이런 어려움을 해결하기 위하여 사용하는 것이 Flexible Box Layout!!!

flex box를 시작하며 속성들에 대해 그림과 같이 배워보자!

• 부모 요소인 flex-container는 display 속성을 flex 혹은 inline-flex로 지정해주면 된다.

  .flex-container {
  display: flex
  }

• 배치 설정
  
  • flex-direction 
  • flex-wrap
• 공간 나누기
  • justify-content (main-axis)
  • align-content (cross-axis)
• 정렬
  • align-items (모든 아이템을 cross axis 기준)
  • align-self (개별 아이템)

Flex-direction과 Flex-warp

• flex-direction의 경우 Main axis 기준 방향을 설정
• flex-warp은 한 줄에 모든 요소를 다 담을 것인지 결정
• flex-flow를 이용하여 shorthand로 표현 가능하다.
  • flex-direction과 flex-wrap에 대한 설정 값을 차례로 작성
  • ex) flex-flow: row nowrap;

justify-content와 align-content

justify content

align-content

• justify의 경우는 main axis기준, align은 cross axis 기준이다.
• start: 아이템들을 axis 시작점으로
• end: axis 끝 쪽으로
• center: axis 중앙으로
• space-between: 아이템 사이의 간격을 균일하게 분배
• space-around: 아이템을 둘러싼 영역을 균일하게 분배 (가질 수 있는 영역을 반으로 나눠서 양쪽에)
• space-evenly: 전체 영역에서 아이템 간 간격을 균일하게 분배

align-items와 align-self

items

self

• align-items & align-self 모두 cross axis를 중심으로 한다
• stretch: 컨테이너를 가득 채움
• baseline: 텍스트 baseline에 기준선을 맞춤

• 기타 속성
  • flex-grow: 남은 영역을 아이템에 분배
  • order: 배치 순서

 

누누히 말하지만 눈으로 봐서는 잘 모른다!!! 꼭 직접 만들어보고 눈으로 확인해보자.

이번 시간까지 CSS를 배웠지만 많이 어렵다고 느껴진다.. 다음 시간엔 정말 유용한 Bootstrap이라는 천사 같은 존재를 만나보자!!