flexbox

플렉스박스선언

display : flex // display: inline-flex; 

부모 태그에 wkrtjd

​

flex-direction : row 가로

flex-direction : column 세로

​

flex-wrap : nowrap

자식태그의 크기를 줄여서 한줄로 정렬해버린다.

 

flex-wrap : wrap

자식태그의 크기를 보호하며 부모태그의 가로길이를 넘어서 정렬하게되면 강제로 한줄 아래로 정렬한다.

​

axis 축

main axis : row 는 가로가 메인 축이 , column은 세로가 메인 축이 된다.

cross axis: row 는 세로가 크로스 축이 , column은 가로가 크로스 축이 된다.

​

justify-content

main axis 방향으로 정렬하는 방식

justify-content : flex-start 시작점에서 부터 정렬(왼쪽(위쪽)부터 시작 )

justify-content : flex-end 끝나는 점에서 부터 정렬 (오른쪽(아래쪽)부터 시작)

justify-content : center 중앙정렬

justify-content : space-between 처음과 끝 컨텐츠는 양쪽 끝에두고 그사이의 여백은 균일하게 준다.

justify-content : space-around 균일한 여백을 자식태그의 양쪽으로 준다.

​

align-items

cross axis 방향으로 정렬하는 방식

align-items : flex-start 시작점에서 부터 정렬(위쪽(왼쪽)부터 시작 )

align-items : flex-end 끝나는 점에서 부터 정렬 (아래쪽(아래쪽)부터 시작)

align-items : center 중앙정렬

​

align-content

flex-wrap:wrap을 사용할 경우 윗줄 자식과 아래줄로 이동한 자식에게 임의의 여백이 생기는데 align-item으로 정렬 할 경우 이여백을 간직한채 이동하여 정렬 되는 단점이 있기때문에 이 임의의 여백을 없애서 정렬하는 align-content 를 사용한다.

​

align-content : flex-start 시작점에서 부터 정렬(왼쪽(위쪽)부터 시작 )

align-content : flex-end 끝나는 점에서 부터 정렬 (오른쪽(아래쪽)부터 시작)

align-content : center 중앙정렬

align-content : space-between 처음과 끝 컨텐츠는 양쪽 끝에두고 그사이의 여백은 균일하게 준다.

align-content : space-around 균일한 여백을 자식태그의 양쪽으로 준다.

​

선 align-items 후 align-content 주로 이렇게 사용하면 된다.

​

flex-grow

부모의 width값을 기준으로 점점 채워라 1~

 

flex-basis

flexbox에 사용되는 요소크기 값을 정하는 css 기본값은 auto로 모든 박스가 별도의 크기를 가지고 있지 않다면

일정하게 width 또는 height를 나눠 갖는다.

 

 

flex-grow (반응형에 유용하게 사용)

flexbox에 사용되는 요소크기의 비율로 flex-basis값보다 커지 수 있는지를 결정하는 속성 

기본값이 0이기 때문에 0보다 큰값이 들어가면 유연하게 변하고 원래의 크기보다 커지며 빈공간을 채우는 속성

 

flex-shrink (반응형에 유용하게 사용)

자식요소에 사용하며 flex-shrink : 1이 기본 값이다.

숫자가 커지면 크기가 줄어들때 그 배수로 줄어들게 된다.

flexbox에 사용되는 요소크기가 고정값이되어 창이 줄어들어도 더이상 줄어들지 않게 하는 속성

 

align-self

자식요소에 사용하며 하나의 자식요소 위치를 변경 할 수 있다.

부모요소가 자식요소보다 큰 height 값을 가지고 있어야 한다.

 

order

자식요소에 사용하며 HTML 수정 없이 순서를 변경 할 수 있다.