display: flex

display: flex는 부모 요소에 적용하여 자식 박스의 방향과 크기를 결정함.

<main>
	<div>box1</div>
	<div>box2</div>
	<div>box3</div>
</main>

기본 레이아웃

부모인 main에 display:flex 속성 적용 시

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

flex-direction : 정렬 축 정하기

flex-wrap : 줄 바꿈 설정하기

justify-content : 축 수평 방향 정렬

속성 값

flex-direction : row 인 경우

flex-direction : column 인 경우

align-items : 축 수직 방향 정렬

속성 값

flex-direction : row인 경우

flex-direction : column 인 경우

자식 요소에 적용해야 하는 Flex-item 속성

flex속성에는 세가지 값을 지정해줄 수 있음.

flex:   <grow(팽창 지수)>    <shrink(수축 지수)>    <basis(기본 크기)>

팽창지수: 요소의 크기(예를 들어 item box)가 늘어날때 얼마나 늘어날 것인지
수축지수: 요소의 크기가 줄어들어야 할 때 얼마나 줄어들 것인지
기본크기: 늘어나는것, 줄어드는것 상관없이 요소의 기본크기가 얼마인지

자식요소에 별도로 flex 속성을 지정하지 않을 시 기본값이 적용 됨

기본 값은 flex: 0 1 auto;

1. grow : 넌 얼마나 늘어날 수 있는 그로우니~?

<main>
  <div id="box1" class="box">box1</div>
  <div id="box2" class="box">box2</div>
  <div id="box3" class="box">box3</div>
</main>

grow의 기본값인 0은 빈공간이 있어도 늘어나지 않음을 의미함.
아래 그림처럼 빈공간이 있어도 늘어나지 않음

box1을 flex-grow:1로 설정 시 모습

box2도 flex-grow : 1로 설정시 모습

box3도 flex-grow : 1로 설정시 모습

2. shrink : 얼마나 줄어들 수 있는데요?얼마면 줄어들 수 있는데요?

grow와 반대로 줄어드는 속성이다. 비율이 클수록 더 많이 줄어들며
flex-grow 속성과 flex-shrink속성을 함께 사용하는 것은 추천하지 않는다.flex-basis속성에 따른 비율이므로 실제 크기를 예측하기 어렵기 때문이다. flex-grow 속성으로 비율 변경하고 있을 때
flex-shrink 속성은 기본값인 1로 두어도 무방함.
근데 shrink를 0으로 하는 경우가있음 이러면 ? 안줄어들게 되는것
어떤칼럼은 고정되어있고 옆에있는 컬럼은 유연하게 움직일때 그럴때 쓸수있음.

3. basis : 기본 크기는 얼마일까?

• basis는 flex-grow 나 flex-shrink에 의해 늘어나거나 줄어들기 전에 가지게 되는 기본 크기.
• flex-grow 0일때(grow기본값), basis크기를 지정하면 크기가 유지됨
• flex-grow 속성의 값이 양수일 경우, 늘어나면서 flex-basis 속성에 적용한 값보다 커질 수도 있음.
• width와 동시설정시 basis가 우선 됨.

grow를 0:1:1, box에 basis를 50px로 설정 시

box1의 크기가 변함없이 50px 유지하는 것을 확인할 수 있음.