flex

flex

• flexbox 레이아웃은 박스를 유연하게 늘리고 줄이는 방법을 토대로 레이아웃을 잡는 방법
• 부모 박스에 display : flex 을 적용해서, 자식 박스의 방향과 크기를 결정

방향(flex-direction)

• flex-direction : row ,row-reverse;
• flex-direction : column , column-reverse;
• row-reverse,column-reverse를 사용하면 start,end의 위치도 뒤바뀜.
• column인 경우 justify-content의 방향이 세로로, align-items의 방향이 가로로 바뀜.

---

justify-content , align-items

• justify-content
  • flex 요소들을 가로선상의 배치
  • flex-start(default) : 요소들을 컨테이너의 왼쪽으로 정렬합니다.
  • flex-end : 요소들을 컨테이너의 오른쪽으로 정렬합니다.
  • center : 요소들을 컨테이너의 가운데로 정렬합니다.
  • space-between : 요소들 사이에 동일한 간격을 둡니다.
  • space-around : 요소들 주위에 동일한 간격을 둡니다.
• align-items
  • flex 요소들을 세로선상의 배치
  • flex-start :요소들을 컨테이너의 꼭대기로 정렬합니다.
  • flex-end : 요소들을 컨테이너의 바닥으로 정렬합니다.
  • center : 요소들을 컨테이너의 세로선 상의 가운데로 정렬합니다.
  • baseline : 요소들을 컨테이너의 시작 위치에 정렬합니다.
  • stretch(default) : 요소들을 컨테이너에 맞도록 늘립니다.

---

align-self

• 개별 요소에 적용할 수 있는 또 다른 속성
• align-items가 사용하는 값들을 인자로 받는다.
• 그 값들은 지정한 요소에만 적용

---

align-content

• flex 컨테이너 사이의 간격을 조절
• flex-start : 여러 줄들을 컨테이너 꼭대기에 정렬
• flex-end : 여러 줄들을 컨테이너 바닥에 정렬
• center : 여러 줄들을 가운데 정렬
• space-between : 여러 줄들 사이에 동일한 간격
• space-around : 여러 줄들 주위에 동일한 간격
• stretch : 여러 줄들을 컨테이너에 맞도록 늘림

---

order

• flex 요소의 순서를 지정
• 기본 값은 0이며, 양수나 음수로 지정 가능
• Integer (...-1, 0(default) , 1, ...)
  • 0 이 현 위치 , 음수면 왼쪽 , 양수면 오른쪽으로 이동

	.class{
		order : 양수 0 음수;
	}

---

flex-wrap

• flex요소들을 한 줄 또는 여러 줄에 걸쳐 정렬
• nowrap : 모든 요소들을 한 줄에 정렬
• wrap : 요소들을 여러 줄에 걸쳐 정렬
• wrap-reverse : 요소들을 여러 줄에 걸쳐 반대로 정렬

---

flex-flow

• flex-direction 과 flex-wrap을 합친 속성
• 공백문자로 구분
• flex-flow : row nowrap;

grow(팽창지수),shrink(수축지수),basis(기본크기)

• 자식 박스에 어떠한 속성도 주지 않으면, 그저 오른쪽으로 컨텐츠 크기만큼 배치됨.
• 위치 조절을 위해 자식 박스의 flex 속성을 줌.
• flex의 기본 속성 -> flex : 0 1 auto;
• flexbox는 기본 크기를 바탕으로 필요에 따라 늘릴 수 있다.
• flex : <grow> <shrink> <basis>
• grow , shrink 는 비례하는 값
• grow -> 박스 별 grow 의 총합 / 박스의 갯수 로 비율을 정함.
• basis
  • grow 나 shrink에 의해 늘어나거나 줄어들기 전 갖게 되는 기본 크기
    grow 가 0일 때, basis 크기를 지정하면 크기 보장된다.
    auto로 지정할 경우 박스는 기본 크기를 갖게 되므로 컨테츠 크기에 따라감. 따라서, basis를 0으로 줘서 컨텐츠 크기와 무관하게 비율로 조절 가능