문제점

: 각 요소가 원이 아니라, 타원으로 나온다.

상황

HTML은 현재 아래와 같다.

<div display='flex'>
	{
		['A','B','C'].map(it => (
			<div display='flex' flex-direction='column' key={it} width='33%' >
				<img border='1px solid #7353ea' border-radius='50%' width='100%' height='100%' />
				<p>{it}</p>
		</div>
		))
	}
</div>

• div의 width = 33%속성을 제거하고, p태그를 제거하니, 정상적으로 원형이 된다.

원인 추정

width의 100%, 33%가 의미하는 것이 뭘까?

<aside> 💡 width, height 크기 설정

1. width: 100% ; 쓸 수 있는 만큼 다 써라
   • margin, padding, border영역 모두 포함
   • 포함하지 않으려면 box-sizing:border-box
2. width:auto, height:auto
   • 블록 요소의 초기값으로 자동 설정된다.
   • margin, padding, border 영역 포함 X

• display값에 따른 default값
  1. block : auto = 100%
  2. inline : width설정이 불가능하므로 항상 100% </aside>

100%는 현재 요소가 사용할 수 있는 너비 중 전체를 쓰는 것을 의미한다.

즉, 이미지의 너비를 100%, 높이도 100%로 설정하면 너비와 높이는 동일한 값을 가지는 것이 아니라 둘 다 쓸 수 있는 전체를 쓴다는 것을 의미한다. 이를 해결하기 위해서는, width와 height각각 최대로 확장하는 게 아니라 둘의 길이를 맞춰줘야 한다.

해결 과정

1안. aspect-ratio

aspect-ratio로 이미지 비율을 설정한다

<aside> 💡 aspect-ratio

: width와 height의 비율을 설정할 수 있다.

aspect-ratio : 16/9;

</aside>

2안. flex:1 1

1. display:flex의 자식들이 동일한 너비를 가지게 하기 위해서는, 자식 요소에 flex:1 1을 설정한다.

   <aside> 💡 flex: 1 1

   flex뒤에 오는 숫자는 순서대로 flex-grow / flex-shrink / flex-basis를 의미한다.

   1. flex-grow : 아이템이 필요에 따라 성장할 수 있는 정도
      • 1이라면 아이템이 가능한 공간을 나눠 가지겠다는 의미
   2. flex-shrink : 축소될 수 있는 정도
   3. flex-basis : 아이템의 기본 크기

   즉 flex: 1 1은 flex:1 1 0을 의미하며 사용가능한 공간을 균등하게 나눠가질 수 있고, 필요에 따라 축소될 수 있으며, 기본 크기를 갖지 않는(flex-basis = 0) 것을 의미한다.

   </aside>

+ a