[CSS] Flex layout

1. 부모요소에서 설정해줘야 할 것 

display: flex;

/* 	부모요소에 flex로 설정하면, 자식 요소들의 크기 위치를 자유자재로 바꿀 수 있게 된다.
	자식 요소 사용에 대한 유연성이 주어진다. */
    
flex-direction: row
/*	column,	 row-reverse,	column-reverse*/

/* 	자식 요소들이 배열될 기준을 정한다.
	row로 하면, 왼위에서 오른쪽으로(가로축) 쭉 나열, 
    column으로 하면 위에서 아래로(세로축) 쭉 나열 
    reverse는 각각 오른쪽에서 왼쪽, 아래에서 위로 
    
    여기서 main 축은 해당 요소가 정한 기준이고, 
    수직 축은 그에 반대되는 축이다. 
    예를 들어 row이면 main 축은 가로이고 
    수직 축은 column이다.*/
    
 flex-wrap: wrap or no wrap;
/*	자식 요소 수가 많거나 크기가 커서 부모 요소를 벗어날 때, 
	wrap 하면, 그래도 구겨서 안쪽으로 다 집어넣겠다는 뜻*/
    
 justify-content: flex-start, flex-end, ...;
 /* main 축에서의 정렬 기준
 	flex-direction이 row일때,
    flex-start는  자식 요소 다 왼쪽 정렬, 
    flex-end이면	자식 요소 다 오른쪽 정렬*/
 
 align-items: stretch, flex-start, flex-end,...;
 /*	수직 축에서의 정렬 기준
 	flex-direction이 row일때,
    stretch는 세로로 최대한 크기 불려서 부모 요소 다 채우기
    flex-start이면 위로 정렬*/
    
  align-content: stretch;  
  /*수직 축이 정렬 기준 
  	align-item은 자식 요소들끼리의 띄움은 용인 하는데 
    얘는 그런 거 없이 정렬 기준 된 곳으로 자식 요소 다 밀어넣음.*/
    
  gap
  /*자식 요소들끼리 얼마나 거리를 띄울 것인가*/

space 형제들은 공간 넓게 쓰며 서로도 띄운다.

이게 align-item 쓴 경우 

이게 align-content 쓴 경우

2. 자식 요소에서 설정 해줘야 할 것. 

flex-basis: 크기;
/*	메인축 상 자식 요소의 길이 row이면 너비, column이면 높이가 됨
	자식요소의 크기가 부모요소를 넘어버리면, 
    부모요소의 크기를 안 넘는 범위에서 최대한의 크기만 표현이 된다.*/

flex-grow: 숫자;
/*	빈 공간이 있으면 해당 자식 요소가 채우겠다는 의미
	숫자에 적힌 값은, 다른 자식 요소의 flex-grow의 값과의 관계에서 상대적인 비율로 작용한다.
    
    ex-
    	1:1이면 50대 50으로 부모요소 채운다.
        7:3이면 7:3으로 채운다,*/
 
 flex-shrink: 숫자;
 /*grow와 반대로 형제 요소들의 크기가 커졌을 때 원래 크기에서 얼마나 양보하겠는가 이다.*/

3. 스스로 해보기

#container{
  height: 100vh;
  display: flex;
  flex-direction: column;
}

#header{
  flex-basis: 100px;
  align-items: flex-end;
  background-color: dodgerblue;
  display: flex;
  flex-direction: row;
  padding: 12px;
  gap: 12px;
}

#header div:first-child{
  background-color: yellow;
  padding: 12px 0;
  text-align: center;
  flex-grow: 1;
}

#header div:last-child{
  background-color: yellow;
  padding: 12px 0;
  text-align: center;
  flex-grow: 7;
}

#main {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
#content{
  background-color: skyblue;
  padding: 24px;
  text-align: center;

}

#footer{
  flex-basis: 60px;
  background-color: tomato;
}