flexbox

flexbox는 block, inline-block, inline만으로는 반응형 웹을 제작하는 데에 불편을 느껴 나타나게 된 개념이다.

 

-display속성의 flex속성 값으로 사용 가능하다.

 

-적용하고자 하는 요소의 부모 Element에 flex Container를 만들어 주어야 사용 가능하다.(child Element와 이야기하지 않는다.)

 

-flex의 기본 direction의 main axis는 row, cross axis는 column이다. 

 

-main axis는 justify-content 속성을 통해, cross axis는 align-items를 통해 위치 조정이 가능하다.

 

align-self

==>  flex는 부모 Element에서 자식Element의 위치를 조정 가능하게 하지만,  align-self 속성은 child가 스스로의 위치를 지정할 수 있게 해주는 속성이다.
*align-item과 똑같이 움직이지만, child Element에서 사용가능한 속성이다.

 

order

==> 모든 element의 order기본값은 0이다. 여기에서 order값을 정수로 변경함으로 인해  element간의 우선순위를 변경할 수 있다.

 

flex-wrap

==> flex-wrap의 기본 설정은 nowrap으로 child Element를 한줄에 위치하도록 유지한다. (child Element의 너비와 높이를 지정하여도 무시하고 한줄에 위치하도록 작용한다.) 

부모 Element에서 속성 값을 지정할 수 있다.
flex-wrap의 속성 값을 wrap으로 바꿔주면 child Element의 너비와 높이 값을 준수한다.

 

reverse

==> child Element의 순서를 반대로 배치한다.(row-reverse, column-reverse, wrap-reverse)

 

align-content

==> justify-content와 같은 속성 값을 cross axis에 적용하게 된다.

 

flex-shrink

==> view port가 줄어들 때 요소의 크기가 줄어드는 비율을 지정할 수 있다.

*default값 = 1

*child Element에 적용하는 속성 값이다.  

 

flex-grow

==> child Element들간의 빈공간을 각 child Element에서 지정한 flex-grow의 속성 값의 비율로 채운다.

*default값 = 0

*child Element에 적용하는 속성값 

 

flex-basis

==> Element의 초기 값을 정해준다. (px도 가능하고 %로 표현도 가능하다.)  %로 표현시 부모Element에 flex container의 크기가 지정되어 있어야 한다.

*child Element에 적용 가능한 속성