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;


justify-content
justify-content는 수평정렬을 담당하는 녀석으로
- flex-start : 영역안의 시작부터(default)
- flex-end : 영역안의 끝부터
- center: 영역의 중앙
- space-between: 아이템을 양쪽끝에 맞춰정렬
- space-around: 양쪽끝을 정렬, 각 아이템 전, 후에 일정한 가격의 공간을 만듬 라는 값들을 가지고 있답니다.

align-items
align-items는 수직정렬을 담당하는 녀석으로
- stretch : 영역의 수직적인 길이를 판단하여 늘려준다. (default)
- flex-start: 늘리긴 커녕 그대로 내비두고 수직 맨 처음부터
- flex-end: 위와 같으나 수직 맨 끝부터
- center: 중앙
- baseline: flext-start와 비슷하나 자식영역의 컨텐츠의 baseline을 기준 라는 값들을 가지고 있답니다.




flex를 이용한 너비채움






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