CSS 레이아웃 스타일: flex(flex-direction, justify-content, align-items 등), grid + box-sizing

(display: flex)      !레이아웃 배치 기능! 요소(item)들을 부모컨테이너안에서 유동적으로 배치하기 위해 flexbox에 넣는다.

flexbox

• 부모요소는 flex container, 자식요소는 flex item
• flex container은 flex의 영향을 받는 전체 공간
• flex의 속성은 컨테이너에 적용 or 아이템 적용

* 부모인 CONTAINER 적용 속성
일단 display: flex를 먼저 설정해 주어야 한다.
 - 가로 방향으로 배치
 - width는 가진 내용물의 width 만큼 차지
 - height는 컨테이너의 높이만큼
처음 자리 container 자리 잡을 때 inline이 block 으로 잡힘

 

CONTAINER 적용 속성
1. flex-direction 아이템 축 방향 설정	flex-direction: row; flex-direction: column;  flex-direction: row-reverse;  flex-direction: column-reverse;	items를 가로로 배치 세로로 배치 가로 역순으로 배치 세로 역순으로 배치
2. flex-wrap 아이템 줄 바꿈 설정	flex-wrap: nowrap;  flex-wrap: wrap;  flex-wrap: wrap-reverse;	줄바꿈 X 줄바꿈 역순으로 줄바꿈
3. justify-content 가로 축 방향으로 아이템 정렬	justify-content: flex-start; justify-content: flex-end; justify-content: center; justify-content: space-between; justify-content: space-around; justify-content: space-evenly;	왼쪽 정렬 오른쪽 정렬 가운데 정렬 아이템 사이 균일 간격 아이템 둘레 균일 간격 아이템 사이, 양 끝에 균일 간격
4. align-items 수직 축 방향으로 아이템 정렬	align-items: flex-start; align-items: flex-end; align-items: center; align-items: baseline; align-items: stretch;	컨테이너 꼭대기 정렬 바닥 정렬 세로선 기준 가운데 정렬 컨테이너 시작점 정렬 아이템이 수직축으로 컨테이너에 맞게 늘어나게 정렬
5. flex-flow flex-direction과 flex-wrap 합친 속성	-	-
6. align-content 여러줄일 때 간격 지정	align-content: flex-start; align-content: flex-end; align-content: center; align-content: space-between; align-content: space-around; align-content: stretch;	여러 줄을 컨테이너 꼭대기 정렬 바닥 정렬 세로선 상 가운데 정렬 줄들 사이에 동일 간격 줄들 주위에 동일 간격 줄들을 컨테이너 맞게 늘림

* 자식인 itmes 적용 속성

1. flex
  - flex-grow, flex-shrink, flex-basis를 한 번에
  - 예) flex: 1 1 auto;
  - (기본값) flex-grow: 0; / flex-shrink: 1 / flex-basis: auto;

  - flex-grow : 컨테이너 안의 남는 여백을 아이템에 분배해서 채우는 방법(분배받은 아이템이 커짐)
   → 여분의 공간이 있으면(없으면 다른 요소와 크기 같음)
        그 공간 이용해 분배받은 flex-grow 숫자에 비율적으로 크기 변형
   → flex-grow: 1; 일 경우 전체 container에서 50%의 비율 차지

  - flex-shrink : 기본값이 1이므로 속성을 정의하지 않아도 자동으로 아이템 축소됨
   → 아이템 너비가 축소되지 않게 하려면 0을 선언해줘야(컨테이너 넘어감)
   → 따라서, flex-wrap: wrap; 속성 부여한 경우 적용 x
   → 줄어들 때 분배받은 숫자에 따라 비율적으로 크기 변형

  - flex-basis : 아이템 기본 크기 결정, 200px 이런식
   → flex-shrink 따로 설정 안하면 유연한 크기 가짐
   → flex-basis가 auto인 경우 width, height 속성 우선


2. order
  - 배치 순서(아이템에 배치 순서 숫자를 부여해 주는 것
  - 작은 숫자일수록 먼저 배치
예) BAC
.item:nth-child(1) { order: 3; } /* A */
.item:nth-child(2) { order: 1; } /* B */
.item:nth-child(3) { order: 2; } /* C */
  - 시각적으로만 바뀜, HTML 구조를 바꾸는 것은 아님


3. align-self
  - 해당 아이템(한개)을 수직축 방향으로 정렬
  - align-selfs 보다 우선순위

 
 

+ box-sizing: border-box;

         box-sizing: border-box;

            /* box-sizing: border-box;

               width와 height 영역을 border를 포함하도록 변경 */

• 설정한 width와 height 값이 안쪽 여백(padding), 테두리(border) 포함
• 기본값인 box-sizing: content-box; 는 width와 height 값이 딱 content만 포함