[CSS3] 레이아웃 flex 이용하기

flex 기본설정

 

display: flex 를 하면 

그 안에 있는 아이템들은 flot:left 또는 display:inline-block; 과 같은 형태가된다. 

 

 

flex의 기본 정렬은 수평축으로 정렬되지만 

flex-direction 을 통해 수직정렬로 변경 할 수 있습니다. 

 flex-direction:column;  //  flex-direction:column-reverse;

 flex-direction:row;(기본)  // flex-direction:row-reverse;

 

 

 

 

기본으로 왼쪽에 붙어 정렬되지만 justify-content를 통해 다양하게 정렬가능합니다. 

 

 

 justify-content:flex-start (기본)  //   justify-content:center  //   justify-content:flex-end

 

 justify-content : space-between  //  justify-content : space-around

 

 

 

 

align-items

 

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

align-items : baseline= 플렉스박스의 기준선에 배치 //  align-items : stretch(기본) = 플렉스박스높이만큼 요소의 높이설정 후 배치

 

align-self속성을 이용해 각 요소마다 다른 align값을 줄 수도 있음.

 

 

flex-wrap

flex-wrap: nowrap;  //  flex-wrap: wrap  //  flex-wrap: wrap-reverse;

 

 

 

 

그럼 실제로 뭔가를 만들때에는 아래글을 참고

[CSS]FLEX 기초2