25일차 복습

https://studiomeal.com/archives/197

flex에 대해 잘 설명된 사이트를 찾아 링크를 올려둔다. 아래 사진들은 전부 이 사이트가 출처다.

이번에야말로 CSS Flex를 익혀보자

 

flex 속성: 아이템에 적용되는 속성들.

 

flex-basis: 아이템의 기본 크기를 지정하는 속성.

                 flex-direction에 따라 width또는 height를 정한다.

                 width나 height보다 상위의 속성이며, 아이템의 기본 점유 크기를 설정한다.

 

flex-grow: 기본값이 0 이며, 그외의 숫자면 늘어난다.

                 컨테이너의 남은 공간을 아이템들이 지정된 숫자의 비율에 따라 나눠 가진다.

                 예) 3개의 아이템에 1,1,2 로 할당했다면 남은 공간을 1:1:2의 비율로 나눠가지게 된다.

 

출처 참조

flex-shirink: 기본값 1이며, 0으로 설정하면 아이템의 크기가 flex-basis보다 작아지지 않기 때문에 고정폭의 컬럼을 쉽게 만들 수 있다. 즉, 기본적으로 할당한 크기를 유지하면서 줄어든다.

 

출처 참조

출처참조

flex: grow, shrink, baisis를 따로 쓰지 않고 한꺼번에 쓸 수 있는 축약형이다.

      : 1 1 100px 와 같이 쓴다.

 

order: 순서를 지정한다. 뒤에 원하는 순서의 숫자를 쓰면된다.

 

z-index: 높낮이를 지정한다.

transform: scare(값): 크기를 키우거나 줄인다. 배수로 늘리고 싶다면 그냥 숫자만 쓰면 되며, %를 사용 가능하다.

 

 

배운 내용이 별로 없어서 뒤로 미루다 늦게 쓰게 되었다.

flex에 관한 내용은 차세대 css의 주요 기능으로 예상되니 프론트엔드를 지망한다면 확실히 숙지해야만 하는 내용이다.