flex는 flexible의 준말로 유동적인 레이아웃을 손쉽게 만들 수 있다는 의미를 가진다.


display: flex;
align-items: center;
justify-content: center;


이렇게 하면 물체가 수평, 수직 중앙정렬이 된답니다.
display:flex를 하게되면 직계자식요소들이 영향을 받게 됩니다 .
여기서 display:inline-flex를 하게 되면 직계자손요소들을 감싸고 있는 부모요소가 inline성질을 가지게 됩니다. 

이외에도 중앙정렬을 하는 CSS방법은 많습니다. table-cell 을 이용하거나 transform을 이용해서 가로, 세로 정렬을 합니다. 

크로스브라우징을 생각하면 flex를 못씁니다. 그걸 생각한다면 positoin absolute를 씁니다. 바로 아래처럼 말이죠. 이렇게 한다면 세로, 가로 정렬이 됩니다. 



position:absolute;
width: 200px;
height:200px;
top:0;
left:0;


==============================================================================
FLEX 기본 구조


배치방향설정 
가로정렬 
flex-direction:row (기본값)
flex-direction:row-revers    
flex-direction:column   
flex-direction:column-serverse
 
http://relation.co.kr/images_board/board_system_publishing/187/test1.html


줄넘김 처리 설정
flex-wrap   
공간이 좁아질 때 줄 바꿈 여부
flex-warp : nowrap;  기본적으로 폭이 좁아지면 정해 놓은 사이즈도 무시하고 같이 좁아지면서 줄바꿈이 되지 않음.  넘치면 삐져 나감
flex-warp : wrap;    정해 놓은 사이즈를 유지한채 줄바꿈.
flex-wrap : wrap-reverse;   줄바꿈 역순배치


flex-flow
flex-direction과 flow-wrap을 한꺼번에 지정 할 수 있는 단축 속성
flex-direction, flex-wrap의 순으로 한칸씩 떼고 작성

.container {
	flex-flow: row wrap;
	/* 아래의 두 줄을 줄여 쓴 것 */
	/* flex-direction: row; */
	/* flex-wrap: wrap; */
}

=================================================================================================
세로정렬
메인축 방향으로 아이템을 정렬하는 속성.
justify-content : flex-star       (기본값)시작점에 맞춰 정렬 (가로일경우 왼쪽, 세로일 경우 위)
justify-content : flex-end       끝점에서 맞춰 정렬 flex-direction이 row(가로배치)일 때는 오른쪽,  column(세로배치)일 때는 아래
justify-content : center         가운데정렬
justify-conyent : space-beteen  자식요소 사이(between) 간격 여백을 균등하게 정렬
justify-content : space-around  자식요소 둘레(around) 여백을 균등하게 정렬
justify-content : space_evenly  자식요소 사이와 양 끝에 균일한 간격을 만듦  (IE, Edge 지원 안됨)

http://relation.co.kr/images_board/board_system_publishing/187/test2.html

.container {
	justify-content: flex-start;
	/* justify-content: flex-end; */
	/* justify-content: center; */
	/* justify-content: space-between; */
	/* justify-content: space-around; */
	/* justify-content: space-evenly; */
}

수직 방향 정렬
align-items   수직 방향으로 아이템을 정렬하는 속성
vartical-align 속성과 유사

align_items : stretch     부모의 여백만큼 자식요소 영역의 수직적인 길이를 판단하여 끝까지 쭉 늘려준다. (default)
align-items : flex-start  자식요소의 영역은 그대로 내비두고 시작점으로 정렬
align-items : flex-end   자식요서의 영역은 그대로 두고 끝으로 정렬
align-items : center      중앙정렬
align-items : baseline    아이템들을 텍스트 베이스라인으로 정렬합니다.

.container {
	align-items: stretch;
	/* align-items: flex-start; */
	/* align-items: flex-end; */
	/* align-items: center; */
	/* align-items: baseline; */
}

여러행 정렬
align-content
flow-warp:wrap; 이 설정된 상태에서, 아이템들의 행이 2줄 이상 되었을 때의 수직축 방향 정렬을 결정하는 속성입니다.

.container {
	flex-wrap: wrap;
	align-content: stretch;
	/* align-content: flex-start; */
	/* align-content: flex-end; */
	/* align-content: center; */
	/* align-content: space-between; */
	/* align-content: space-around; */
	/* align-content: space-evenly; */
}

가운데 정렬
===============================================================================
displsy:flex;
align-items:center;
justify-content:center

http://relation.co.kr/images_board/board_system_publishing/187/test4.html


.container { 
  display: flex;
} 
.container .flex1 { 
          flex: 1;
}
.container .flex2 { 
          flex: 2;
}
 


이렇게 하면 컨테이너 안의 flex1은 1/3만큼, flex2는 2/3만큼 채워지게 된답니다. 

flex-diection: column
을 통해 가로정렬 기준을 세로 정렬로 만들 수 있습니다.  
여러가지 값들을 이용해서 세로정렬하는 순서, 반대 등으로 설정할 수도 있습니다.

flex-shrink: 1
display:flex안의 있는 자식 요소들에 대해 얼마나 많이 줄어들까에 대한 속성값. 
크기가 증가할 수록 그 자식요소의 너비는 감소하게 된다. 

문법
< flex-shrink> ||
flex-grow: 얼만큼의 영역을 가질지를 정한다. 음수는 유효하지 않으며, 디폴트값은 0
flex-shrink: 얼만큼 줄어들지를 정한다. 음수는 유효하지 않는다. 디폴트는 1 
flex-basis:  처음 시작할 때의 사이즈를 정한다. 100px, 은 width가 100px로 시작된다. 디폴트는 auto
display: flex를 하고 자식요소의 flex를 설정하는데.. 
flex:auto; flex-grow가 자동적으로 정해진다.  




출처 
http://blog.naver.com/PostView.nhn?blogId=nsoft21&logNo=221558782515&parentCategoryNo=&categoryNo=13&viewDate=&isShowPopularPosts=false&from=postView

https://jhc9639.blog.me/220984499817