css 레이아웃 끝판왕 flexible box 에대해 알아보자 !

1. flex-box!

display속성의 값인 flex는 각 요소들을 쉽고 효율적으로 정렬할 수 있게 해 준다.

정렬하고 싶은 요소들의 부모 요소에 display값을 flex로 주면 그 요소는 flex-box가 되고 자식 요소는 flex-item 된다.
flex-box 자체는 block요소처럼 수직으로 쌓인다.

※display속성의 값을 inline-flex로 주면 flex-box 자체가 inline 요소처럼 수평으로 쌓이게 된다.

flex-box는 기본적으로 flex-item들을 수평으로 펼쳐주며 자기 자신에 사용하는 속성과 각각의 flex-item들에 사용하는 속성으로 나뉜다.

display: flex; 가 되면 마진병합현상이 발생하지 않는다.

flex-box의 속성

• flex-flow flex-direction 과 flex-wrap의 단축 속성이다. ex) flex-flow: flex-direction flex-wrap;
    flex-direction  flex-item이 x축으로 쌓일지 y축으로 쌓일지 설정한다.
    값은 x축으로 쌓이는 row, y축으로 쌓이는 column,
    x축의 반대편부터 쌓이는 row-reverse, y축의 반대편부터 쌓이는 column-reverse 가 있다.
    flex-wrap flex-item이 줄 바꿈이 될지 여부를 설정할 수 있다.
    값은 flex-item들의 크기가 부모 요소보다 커져도 줄 바꿈 하지않고 한줄에 다 표시되게 하는 nowrap, 
    flex-item들의 크기가 변형되지 않게 줄바꿈 되어 표시되게 하는 wrap,
    줄 바꿈이 될때 아래로 줄바꿈되는 것이아니라 위쪽으로 줄바꿈이 되게 하는 wrap-reverse가 있다
• justify-content 주 축의 정렬 방법을 설정해준다. row 일 경우 주축은 x축, column 일경우 주축은 y축.
    값은 시작점부터 정렬하는 flex-start, 끝점으로 정렬해주는 flex-end, 가운데 정렬하는 center,
    첫 번째 flex-item은 시작점 , 마지막 flex-item은 끝점, 나머지는 그 사이에 고르게 정렬시켜주는 space-between,
    flex-item을 동일한 여백을 줘서 정렬 시켜주는 space-around 가 있다.
• align-content 교차 축의 정렬 방법을 설정해준다. row 일 경우 교차 축은 y축, column 일경우 교차 축은 x축.
      주의할 점은 flex-wrap 속성으로 flex-item이 2줄 이상이고 여백이 있을 경우 에만 사용할 수 있다.
      값은 justify-content와 같으나 기본값은 stretch로 2줄 이상된 flex-box에 여백이 있을 경우 flex-item을 늘려서 내부를 채운다.
• align-items flex-item이 한 줄일 경우 교차 축의 정렬 방법을 설정해준다. 2줄 이상 일 경우는 align-content속성이 우선된다.  
      값은 stretch, flex-start, flex-end, center, 내부 텍스트 기준선에 맞춰서 정렬하는 baseline 이 있다.

 

 

flex-item의 속성

• order flex-item의 순서를 설정해준다. 값의 숫자가 클수록 순서가 밀린다.
• flex 아래 속성들의 단축 속성. ex) flex: flex-grow flex-shrink flex-basis;
         주의 할점은 단축 속성을 사용할 때에는 flex-basis를 명시하지 않으면 기본값이 0이 된다.
  flex-grow flex-item의 너비 비율을 설정해준다. 
  ex) 가로 너비가 400px인 flex-box에 3개의 flex-item이 있을 경우, 각 item에 flex-grow를 순서대로 1, 2, 1 을 주게 되면,
        첫 번째 item의 너비는 flex-box의 전체의 1/4, 두 번째 item은 2/4, 세 번째 item은 1/4의 비율을 가져가게 된다.
  flex-shrink flex-box가 줄어들게 될 때 각 flex-item의 감소하는 너비 비율을 설정해준다.
  ex) 가로 너비가 400px인 flex-box에 가로 너비가 200px인 flex-item 두 개가 있을 경우, 각 item에 flex-shrink를 순서대로 1, 2를        주게 되면, flex-box의 줄어들었을 때, 첫 번째 item의 총 줄어든 너비의 1/3 이 줄어들고, 두 번째 item은 2/3가 줄어든다. 
  
• flex-basis flex-item의 기본 너비를 설정해준다. 기본값은 auto 로 내부 content의 영향을 받는다.
                   값을 0으로 설정해 놓으면 item들의 크기를 관리하기가 좀 더 쉽다.
• align-self 교차 축에서 개별 item의 정렬 방법을 설정해준다.
                   값은 align-items와 같으며 기본 값은 auto로 align-items 속성을 상속 받는다.
                   align-self 속성이 align-items 속성보다 우선시 된다.