css flex-box 사용방법

 

사용방법 :

display : flex​ ​- 박스를 블록 수준의 플레서블 박스로 작동하게 합니다.
표기 )​ display: flex;

 

flex 속성 :

flex-direction

row ​:

박스를 왼쪽에서 오른쪽으로 배치합니다. 해당 속성값으로 설정 시 주축은 가로가 되고 , 교차축은 세로가 됩니다.
표기 )​ flex-direction : row;

row-reverse ​:

박스를 가로로 배치하되 역방향으로 배치합니다. 즉, 오른쪽에서 왼쪽으로 배치합니다. 해당 속성값으로 설정 시 주축은 가로가 되고,교차축은 세로가 됩니다.
표기 )​ flex-direction : row-reverse;

column ​:

박스를 위에서 아래로 배치합니다. 해당 속성값으로 설정 시 주축은 세로가 되고, 교차축은 가로가 됩니다.
표기 )​ flex-direction : column;

column-reverse ​:

박스를 세로로 배치하되 역방향으로 배치합니다. 즉, 아래에서 위로 배치합니다. 해당 속성값으로 설정 시 주축은 세로가 되고, 교차축은 가로가 됩니다.
표기 )​ flex-direction : column-reverse;

 

flex-wrap

nowrap ​:

박스를 한 줄로 배치하며, 기본값입니다. 표기 )​ flex-wrap :nowrap;

wrap ​:

박스가 부모 영역의 너비보다 클경우 다음줄에 배치합니다.

표기 )​ flex-wrap :wrap;

wrap-reverse ​:

박스를 여러 줄로 배치하되 역방향으로 배치합니다. 즉, 주축이 가로일 때는 아래에서 위로, 주축이 세로일 때는 오른쪽에서 왼쪽으로 배치합니다.
표기 )​ flex-wrap :wrap-reverse;

 

flex-flow

[flex-direction] [flex-wrap]​: 첫 번째 속성값은 박스의 배치 방향을 설정하는 속성의 값을 작성하고, 두번째 속성값은 박스를 여러 줄로 배치하는 속성의 값을 작성합니다.
기본값 : flex-flow : row nowrap;
표기 )​ flex-flow : column wrap;

 

justify-content

flex-start ​:

자식 박스를 부모 박스 주축의 시작점으로 배치하며, 기본값입니다.
표기 )​ justify-content : flex-start;

flex-end ​:

자식 박스를 부모 박스 주축의 끝점으로 배치합니다. 표기 )​ justify-content : flex-endt;

center ​: 자식 박스를 부모 박스의 중앙으로 배치합니다. 표기 )​ justify-content : flex-center;

space-between ​: 플랙서블 박스에 빈 공간이 있을 때 사용합니다. 첫 번째 박스와 마지막 박스는 양쪽 끝으로 붙이고, 나머지 박스는 동일한 간격으로 정렬됩니다.
표기 )​ justify-content :space-between;

space-around ​: 플렉서블 박스에 빈 공간이 있을때 사용합니다. 단, 양쪽 끝에 있는 박스의 양 옆에도 공간을 둔 채 자동 정렬됩니다.
표기 )​ justify-content :space-around;

 

align-items

stretch ​:

박스를 확장해서 배치하며, 기본값입니다. 표기 )​ align-items :stretch;

flex-start ​:

박스를 교차축의 시작점에 배치합니다. 표기 )​ align-items : flex-start;

flex-end ​:

박스를 교차축의 끝점에 배치합니다. 표기 )​ align-items : flex-end;

center​:

박스를 교차축의 중앙에 배치합니다. 표기 )​ align-items : center;

baseline​:

자식 박스들을 교차축의 시작점에 배치되는 자식 박스의 글자 베이스라인에 맞춰 배치합니다. 시작점에 배치되는 자식 박스는 교차축의 시작점과 글자 베이스라인으 거리가 가장 먼 박스가 교차축의 시작점에 배치됩니다.

표기 )​ align-items : baseline; align-self

 

auto,stretch,flex-start,flex-end,center,baseline ​:

해당속성은 align-items와 동일하게 배치되며, 교차축방향으로 개별배치 됩니다.

auto ​: 플렉서블 박스(플렉스 아이템의 부모 박스)의 align-items 속성값을 상속받습니다. 부모 박스에 적용된 속성값이 없는 경우에는 stretch 속성값이 적용됩니다.
표기 )​ align-self : auto;

 

align-content

stretch ​:

박스를 확장해서 배치하며, 기본값입니다. 표기 )​ align-content : stretch;

flex-start ​:

자식 박스를 부모 박스 교차축의 시작점으로 배치합니다. 표기 )​ align-content : flex-start;

flex-end ​:

자식 박스를 부모 박스 교차축의 끝점으로 배치합니다. 표기 )​ align-content : flex-end;

center ​:

자식 박스를 부모 박스의 중앙으로 배치합니다. 표기 )​ align-content : flex-center;

space-between ​:

플랙서블 박스에 빈 공간이 있을 때 사용합니다. 첫 번째
박스와 마지막 박스는 양쪽 끝으로 붙이고, 나머지 박스는 동일한 간격으로 정렬됩니다.

표기 )​ align-content :space-between;

space-around ​: 플렉서블 박스에 빈 공간이 있을때 사용합니다. 단, 양쪽 끝에 있는 박스의 양 옆에도 공간을 둔 채 자동 정렬됩니다.
표기 )​ align-content :space-around;

order

order ​: 정수값에 따라 순서 배치됩니다. 기본값은 0 입니다. 표기 )​ order :0;

 

flex

flex ​: [flex-grow] [flex-shrink] [flex-basis] 0 1 auto(기본값)

0 auto( 0 1 auto 와 같음) initial( 0 1 auto 와 같음) auto( 1 1 auto 와 같음) none( 0 0 auto 와 같음)

flex-grow ​:

플렉서블 박스에 여백이 있을 때 플렉스 아이템의 크기를 늘일 수 있는 속성입니다. 속성값은 비율로 설정합니다. 단, 음 숫값은 사용 불가
표기 )​ flex-grow : 1,1,2;

flex-shrink​:

플렉서블 박스 안의 플렉서블 아이템의 크기가 넘칠 경우 크기를 줄일 수 있는 속성입니다. 속성값은 비율로 설정합니다. 단, 음 숫값은 사용 불갈
표기 )​ flex-shrink: 2,3,5,;

flex-basis​:

플렉스 아이템의 기본 크기를 설정하기 위한 속성입니다. width 속성에서 사용할 수 있는 모든 값을 사용할 수 있습니다. 단, 음 숫값은 사용 불가
표기 )​ flex-basis: 160px;

 

 

https://www.w3schools.com/css/css3_flexbox.asp

CSS Flexbox (Flexible Box)