flex

▼한줄에 여러 박스를 나열하고 싶을 때
▷자식을 한줄에 여러개를 배치한다면
  - 부모에게 display:flex; 입력
  - justify-content:space-between (양쪽 끝을 기준으로 정렬, 맨끝에 위치)

  - justify-content:space-around (양쪽 끝을 기준으로 정렬, 양끝에 간격이 있음)
  - justify-content:center (가운데 정렬)

 

▼자식 줄바꿈

▷자식의 너비가 부모의 너비보다 커질시 자동으로 줄을 바꾸어 배치한다
▷부모에게 flex-wrap:wrap
 ㄴex)
    ul{
       display:flex;
       justify:center;
       flex-wrap:wrap;
       }

 

▼정렬 기준 방향 설정

▷flex-direction

-row (기본값) : 왼쪽에서 오른쪽으로   수평 배치

-row-reverse : 오른쪽에서 왼쪽으로  수평 배치

-column : 위에서 아래로 수직 배치

-column-reverse : 아래에서 위로 수직 배치

ㄴex)

    ul{

        flex-direction:column;

       }

 

 

▼세로기준 정렬
▷block 요소
>height. line-height로 정렬, 배경도 같이 늘어남

▷inline 요소
 :line-height시 배경은 그대로, 공간만 늘어남
>align-items:flex-start (=위를 기준으로 정렬)
>align-items:center (=세로 중심를 기준으로 정렬)

▷block 요소 안에 inline 요소
 :inline 요소의 높이를 늘리면 block 요소도 같이 늘어남

 

▼flexBox

▷flex-grow / flex-shrink / flex-basis 가 있다

▷확장비률 / 축소비율 / 초기크기

▷자식에게 flex:1; 값을 주면 부모의 크기 변화에 따라 자식의 크기가 따라 변한다