Flexbox

 

 

 

 

 

 

 

 

display : flex 는 위 box or container처럼 초기 값을 가진다

메인 축에 관여하는 용어 3가지

1. flex-direction : row / row - revers / column / column - reverse

ㄴ 컨테이너 안에서 본축 방향을 결정

2 . justify - content : flex- start / flex - end / center / space - between / space - evenly / space - around

ㄴ 주축을 기준으로 요소와 콘텐츠를 어떻게 배치할지 결정하는 속성

3. Flex-warp : warp / war-revers /nowarp

ㄴ 주축을 기준으로 수평 - 새로운 행/ 수직 - 새로운 열을 만들어 요소 정렬

 

교차축에 관여하는 용어 3가지

1. Align - items : flex-start/ center/ flex-end/ baseline (텍스트의 기준선에 맞춰 정렬)

ㄴ교차축을 기준으로 요소와 콘텐츠를 어떻게 배치할지 결정하는 속성 

2. Align- self : flex- start/ flex-end/ center

ㄴ  Align- self는 Align - items 와 비슷하지만 교차축을 기준으로 배열된 단일 요소에 사용 

3. Align - content : space-between/ space-around/ flex-start/ flex-end/ center

ㄴ행이나 열이 여러개 일때 교차축을 기준으로 정렬

여러행, 열이 있을 때만 사용하는 정렬 방법. Flex-warp이 적용되있어야 한다.

 

Flex container에 관련된 3가지 특성

 

1.flex-basis :   px;

ㄴ 요소가 배치되기전의 요소의 최초 크기를 결정

     

2. flex-grow : 1; (flex-grow 에서 단위는 안적어도 됨)

ㄴ공간이 있을때 요소가 그공간을 얼마나 차지할 지를 결정

 

3. flex-shirnk 

ㄴ = flex-grow와 개념이 똑같음

 

Flex 속기법

flex :  flex-grow,  flex-shrink, flex-basis 

flex : flex-grow, flex- shirnk

flex :  flex-grow , flex- basis

  ㄴ   (px or em) or (px or em)

flex : flex-grow

ㄴ    숫자 아닌 값 1개나 단위 없는 숫자