[코드스테이츠]-CSS 활용하기

Flexbox로 레이아웃 잡기

• 박스를 유연하게 늘리거나 줄여 레이아웃을 잡을 수 있다.
  display:flex 는 부모 박스 요소에 적용해, 자식 박스의 방향과 크기를 결정하는 레이아웃 구성방법이다.
• 요소의 정렬, 요소가 차지하는 공간을 설정해 줄 수 있다.

부모 요소에 적용해야하는 Flexbox 속성

flex-direction: 자식요소들을 정렬 할 정렬축을 결정한다.

• flex-wrap : 하위 요소들의 크기가 상위 요소의 크기를 넘으면 자동 줄 바꿈 할 것인지를 결정한다.
  

• justify-content : 자식요소들을 수평방향으로 어떻게 정렬할 것인지 결정한다.
  

• align-items : 자식요소들을 수직방향으로 어떻게 정렬할 것인지 결정한다.
  
  

자식 요소에 적용해야하는 Flexbox 속성

• 부모 요소에 적용해야 하는 속성들이 자식 요소들의 정렬과 관련이 있었다면, 자식 요소에게 적용해야 하는 속성인 flex는 요소가 차지하는 공간과 관련이 있다.
• flex 속성에는 세 가지 값을 지정해줄 수 있다.

1. flex-grow(팽창 지수) - 요소의 크기가 늘어나야 할 때 얼마나 늘어날 것인지를 의미한다.
   팽창지수의 절대적 크키가 아닌 총합에서의 비율로 빈 공간을 차지한다.

2. flex-shrink(수축 지수) - 요소의 크기가 줄어야 할 때 어람나 줄어들 것이지를 의미한다.
   flex-grow속성과 함께 사용하는 일은 추천하지 않는다.

3. flex-basis(기본 크기) - 늘어나고 줄어드는 것과 상관없이 요소의 기본 크기는 얼마인지를 의미한다.
   flex-grow 속성의 값이 0인 경우에만 flex-basis 속성의 값이 유지된다.
   width와 동시에 적요할 경우, flex-basis가 우선된다.

새로 알게 된 내용

• flex는 부모요소와 자식 요소에 적용해야 하는 속성을 잘 구분해야한다.
• flex 속성값은 순서대로 팽창 지수, 수축 지수, 기본 크기로, 기본값은 0, 1, auto이다.
• flex-grow 의 값이 0 이 아니라면, flex-basis 에서 설정한 값보다 커질 수 있고, flex-shrink 의 값이 0 이 아니라면, flex-basis 에서 설정한 값보다 작아질 수 있다. 즉 요소의 크기가 flex basis값으로 유지되지 않는다.