[CSS -13] 플렉스 박스와 레이아웃

플렉스 박스 레이아웃

레이아웃

• 구성 요소를 공간에 효과적으로 배열하는 일, 또는 그 기슬
• css레이아웃은 웹 요소를 올바른 장소에 배치하는 기술
• css레이아웃 기술은 형제 요소들을 가지런히 정렬할 수 있게 해줌
• 요소가 컨테이너 내부에서 어떤 위치에 놓이게 될지 결정 할 수 있음

대표적인 CSS 레이아웃 기술

• 일반적인 문서 흐름
• display 속성
• 플렉스 박스
• 그리드 레이아웃
• float속성
• position 속성
• 기타 등등

플렉스 박스(flexbox)

• 플렉스 박스는 행 또는 열을 주축으로 설정하여 웹요소를 배치 및 정렬하는 1차원 레이아웃 방식플렉스 방식에서 요소의 배치와 정렬은 플렉스 컨테이너, 플렉스 아이템 간의 상호작용을 통해 결정
  • 플렉스 컨테이너 : 플렉스 박스 방식으로 레이아웃을 결정할 요소
  • 플렉스 아이템 : 플렉스 컨테이너 내부에서 플렉스 박스 방식으로 배치되는 요소

  disply : flex;
  disply : inline-flex;
  지정으로 사용한다

• 플렉스 박스는 두개의 축을 기반으로 동작
  • 기본값의 주축 가로(왼쪽에서 오른쪽)

 속성

flex-direction

• 플렉스 컨테이너의 주축을 결정하는 속성
• 행은 가로축, 열은 세로축을 주축으로 함
• 대표적인 속성값 및 의미
  • row : 기본값, 주축은 행, 방향은 콘텐츠 방향과 동일
  • row-reverse : 주축은 행, 방향은 콘텐츠 방향과 반대
  • column : 주축은 열, 방향은 콘텐츠 방향과 동일
  • column-reverse : 주축은 열, 콘텐츠 방향과 반대

flex-warp

• 플렉스 아이템들이 강제로 한줄에 배치되게 할 것인지 영역내에서 벗어나지 않고 여러행으로 나우어 표현 할 것인지 결정
• 대표적인 속성 값 및 의미
  • nowarp : 기본값, 공간이 부족하더라도 요소를 한줄에 배치
  • warp : 공간 크기에 따라 요소가 여러 행에 걸쳐 배치
  • wrap-reverse : wrap과 동일하나 요소 나열되는 시작점과 끝점이 반대

flex-grow

• 풀렉스 아이템이 기본 크기보다 더 커질 수 있는지를 결정하고, 플렉스 컨테이너 내부에서 할당받을 수 있는 공간을 상대적으로 정의할수 있는 속성

flex-shrink

• 플렉스 아이템이 기본 크기보다 더 작아질수 있는지를 결정
• 플렉스 컨테이너 내부에서 할당받을 수 있는 공간을 상대적으로 정의 할 수 있는 속성

justify-content

• 플렉스 아이템들이 플렉스박스 주축을 따라 배치될때, 요소 사이의 공간을 분해하는 방식을 결정
• 대표적인 속성 값 및 의미
  • flex-start : 주축의 시작점으로부터 끝점을 향해 배치
  • flex-end : 주축의 끝점으로부터 시작점을 향해 배치
  • center : 주축의 중심부에 배치
  • space-between : 주축에서 일정한 간격을 둔 채 양끝 정렬 배치
  • space-around : 모든 요소가 동일한 여백을 갖도록 배치
  • space-evenly : 모든 요소 사이의 간격을 동일하게 유지해 배치

flex-basis

• 플렉스아이템의 초기 크기를 지정하는 속성

align-items

• 플렉스 컨테이너의 교차축 위에서 플렉스 아이템들이 어떤 식으로 정렬될 것인지를 결정
  • 대표적인 속성 값 및 의미
    • stretch : 플렉스 아이템이 교차축 길이에 맞춰 늘어남, 너비또는 높이가 우선
    • flex-start : 교차축의 시작점으로 부터 끔점을 향해 배치
    • flex-end : 교차축의 끔점으로부터 시작점을 향해 배치
    • center : 교차축의 중심부에 배치

flex

align-self

• 각각의 플렉스 아이템이 교차축에서 어떤 시으로 정렬될 것인지를 스스로 결정
  • 대표적인 속성 값 및 의미
    • stretch : 플렉스 아이템이 교차축 길이에 맞춰 늘어남, 너비또는 높이가 우선
    • flex-start : 교차축의 시작점으로 부터 끔점을 향해 배치
    • flex-end : 교차축의 끔점으로부터 시작점을 향해 배치
    • center : 교차축의 중심부에 배치

order

• 플렉스 아이템의 배치 순서를 설정할 수 있으며, 지정한 숫자에 맞춰 오름차순으로 배치가 진행
• 코드에 영향을 끼치는 것이 아닌 보여지는 순서에만 영향

align-content

• 교차축 위에서 justify-contennt와 동일하게 사용할 수 있는 속성
• 두조건이 만족되면서 여유공간이 있을 때만 동작
  • flex-warp의 값이 warp으로 지정 되어 있을때
  • 아이템을 배치하기 위해 필요한 공간보다 플렉스 컨테이너가 더 클때