플렉서블 박스 레이아웃

• 그리드 레이아웃이 기본이됨

• 플렉스 박스를 원하는 위치에 배치하는것

• 여유 공간에 따라 , 너비나 높이 위치를 자유롭게 변형할수있음

• 플렉스 컨테이너 : 웹 문서에 텍스트나 이미지 , 표 등 웹 요소들을 픅렉서블하게 사용하려면 먼저 플렉스 컨테이너로 묶어주어야합닏다.

• 플렉스 항목 : 플렉스 컨테이너에 담기는 웹 요소입니다.

• 주축 : 플렉스 컨테이너 안에서 플렉스 항목을 배치하는 기본 방향입니다.
  기본적으로 주축은 왼쪽에서 오른쪾으로 수평 방향으로 배치합니다.
  주축에서 플렉스 항목이 배치된기 시작하는 지점을 주축 시작점이라고 합니다.
  배치가 끝나는 지점을 주축 끝점이라고 합니다.

• 교차축 : 교차축은 주측과 교차되는 방향입니다.
  기본적으로 위에서 아래로 배치합니다.
  교차축에서 배치가 시작되는 지점을 교차축 시작점
  배치가 끝나는 지점을 교차축 끝점이라고 합니다.

display 속성

• 배치 요소들을 감싸는 부모 요소를 플렉스 컨테이너로 지정

• flex : 플렉스 박스를 박스레벨 요소로 정의합니다.
  -inline-flex : 플렉스 박스를 인라인 레벨요소로 정의합니다.

예)

display 속성과 브라우져 접두사

• 최신 모던 브라우져에서는 모두 지원되고 대부분의 구식 버전에서도 지원됨

• 하지만, 브라우저마다 플렉스 박스를 지원하는 방법이 달라 브라우저 잡두사를 붙여야함

예)

.wrapper{

display:-webkit-box; iso 6 이하 , 사파리 3.1

display:-moz-box; 파이어폭스 19이하

display:-ms-flexbox; IE 10

display:-wrbkit-flex; 웹킷 구 버전

display:-flex; 표준 스펙

}

• flex-direction 속성

• 플렉스 항목 배치 방향 지정

• row : 주축을 가로로 교차축을 세로로 지정합니다.
  플렉스 항목은 주축 시작점에서 끝점으로(왼쪽에서 오른쪽으로) 배치 됩니다.

• row-inverse : 주축을 가로로 교차축을 세로로 지정합니다. 플렉스 항목은 주축 끝점에서 시작점으로 (오른쪽에서 왼쪽으로) 배치 됩니다.

• column : 주축을 세로로 교차축을 가로로 지정합니다.
  플렉스 항목은 주축 시작점에서 끝점으로 (위쪽에서 아래쪽으로) 배치됩니다.

• column-inverse : 주축을 세로로 교차축을 가로로 지정합니다.
  플렉스 항목은 주축 끝점에서 시작점으로(아래쪽에서 위쪽으로) 배치 됩니다.

예)

flex-wrap 속성

플렉스 항목을 한 줄 또는 여러 줄로 배치

• no-wrap 플렉스 항목들을 한 줄에 표시합니다. 기본값입니다.

• wrap 플렉스 항목을 여러 줄에 표시합니다

• wrap-reverse 플렉스 항목을 여러 줄에 표시하되 기존 방향과는 반대로 배치 합니다.

예)

flex-flow 속성

• 플렉스 배치 방향과 여러줄 배치를 한꺼번에 지정
• 기본 값은 flex-flow: row no-wrap

order 속성

• 플렉스 항목의 배치 순서 바꾸기
• order 값에 지정된 순서에 따라 배치됨

justify - content 속성

• 플렉스 항목을 주축 방향으로 배치할때의 배치 기준

• flex - start 주축의 시작점을 기준으로 배치합니다

• flex- end 주축의 끝점을 기준으로 배치

• center 주축의 중앙을 기준으로,,,

• space-between 첫번쨰 플렉스 항목과 마지막 플렉스 항목은 시작점 과 끝점에 배치한후 중앙 항목들은 같은 간격으로 배치합니다

• space-around 모든 플렉스 항목들은 같은 간격으로 배치합니다.

align-item 속성 , align-self 속성

• 교차축을 기준으로 하는 배치 방법 조절

• stretch 플렉스 항목을 확장해 교차축을 꽉 채웁니다.
  기본값입니다.

• flex-start 교차축의 시작점을 기준으로 배치

• flex-end 교차축의 끝점을 기준으로..

• center 교차축의 중앙을 기준으로 배치

• baseline 시작점과 글자 기준선에 가장 먼 플렉스 항목 을 시작점에 배치...
  그리고 그 글자의 기준선과 다른 항목의 기준선을 맞추어 배치...

align-content 속성

-플렉스 항목이 여러 줄로 표시될때 교차축 축 기준의 배치방법 지정

align-content : flex-start (기본값)

align-content : space-between

align-content : flex-end

align-content : space-around

align-content : center

flex 속성

• 플렉스 항목의 크기 조절

• flex-grow 와 flex-shrink , flex-basis 속성을 flex 속성으로 묶어 사용

• 기본값 flex : 0 1 auto;

속성 값들..>>>
<flex - grow >
프렉스 항목의 너비를 얼마나 늘일지 숫자로 지정합니다
<flex - shrink>
플렉스 항목의 너비를 얼마나 줄일지 지정합니다

플렉스 항목의 기본 크기를 지정합니다.
width 속성처럼 너비 값을 지정할 숭도 있고 0니아 auto를 지정할 수도 있습니다.
0일 경우 , flex-grow 와 flex-shrink 의 인수 값을 함께 사용하고, auto 일 경우 , 플렉스 항목의 너비값을 사용 합니다.

initial
항목의 width/height 값에 의해 크기가 결정되는데 플렉스 컨테이너의 공간이 부족할 경우, 최소 크기까지 줄입니다.

auto
항목의 width/height 갑에 의해 크기가 결정되지만 플렉스 컨테이너의 공간에 따라 늘이거나 줄입니다.

예)

flex:initial; == flex:0 1 auto
flex:auto; == flex: 1 1 auto;
flex:none; == flex:0 0 auto;
flex: <숫자>; == flex: <숫자><숫자> 0 ;