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




세로정렬
justify-content:flex-star 시작점에 맞춰 정렬 (가로일경우 왼쪽, 세로일 경우 위)
justify-content:flex-end 끝점에서 맞춰 정렬
justify-content:center 가운데정렬
justify-content:space-around 자식요소들의 여백을 균등하게 정렬
justify-conyent:space-beteen 여백을 균등하게 정렬


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


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




수직방향 여백을 두는 방식
align-items 수직 방향 여백을 두는 방식
vartical-align 속성과 유사

align-items : flex-start
align-items : center
align-items : flex-end

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




flex-wrap
공간이 좁아질 때 줄 바꿈 여부
flex-warp:nowrap 기본적으로 폭이 좁아지면 정해 놓은 사이즈도 무시하고 같이 좁아지면서 줄바꿈이 되지 않아요
flex-warp:wrap 정해 놓은 사이즈를 유지한채 줄바꿈



가운데 정렬
===============================================================================
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-grow> < flex-shrink> || <flex-basis>
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