CSS_Flex2

오늘은 Flex두번째 시간입니다.

오늘은 자식(item)의 속성을 알아보도록 하겠습니다.

지난번과 같은 코드입니다.

추가된 것은 style속성에서 .item:nth-child(2) 라는 속성인데 

이것은 아래 제가 주석을 달아놓은것 같이 자식 div에서 2번째의 속성을 의미합니다.

아래 그림 보도록 하겠습니다.

보시는 바와같이 결과화면이 이렇게 출력이 됩니다.

다음은 flex-direction이 row일때의 화면입니다.

결과화면은 위의 그림과 같습니다.

따라서 flex-basis 라는 속성은 flex-direction이 어떤값이냐에 따라 height가 될 수도 있고 width 값이 될 

수도 있습니다.

다음은 flex-grow속성에 대해서 알아보도록 하겠습니다.

쉽게말해서 flex-grow는 전체를 1/N(N분의 1)을 의미합니다.

바로 위의 코드로 얘기 해 보도록 하겠습니다.

바로 위의 코드는 부모 div가 skyblue라는 바탕색을 가지고 있기 때문에 1,2,3,4,5 옆에 skyblue색이 표현이 되어있습니다.

여기서 flex-grow값을 넣어보도록 하겠습니다.

flex-grow값을 1 로 넣었습니다.

그러면 전체를 1 : 1 : 1 : 1 : 1 의 값으로 나누어 지게 됩니다.

그럼 위와 같이 2번째 속성에 flex-grow값을 넣어보도록 하겠습니다.

이렇게 넣게 되면 item:nth-child(2)에 flex-grow:2 값이 캐스캐이딩에 의해 우선순위때문에 먼저 반응하게됩니다.

그래서 결과화면은 전체를 6으로 나눈것에서 1 : 2 : 1 : 1 : 1 로 나누어 지게 됩니다.

  

다음은 flex-shrink 에 대해서 알아보도록 하겠습니다.

flex-shrink의 값은 화면을 작게 했을때 고정하는것을 의미합니다.

flex-shrink : 0 으로 주었을때 화면을 줄이면 3,4,5는 보이지 않고 1,2가 고정적으로 자리를 잡고 있는것을 보실 수 있습니다.

숫자를 늘려가면서 실습해 보시면 좋을것 같아요!