[CSS] FLEX

Flex 구조 예시
<div class="container">
	<div class="item">helloflex</div>
	<div class="item">abc</div>
	<div class="item">helloflex</div>
</div>

flex는 크게 Container와 Item 2개 구조로 이루어져 있다.
Container는 Item를 감싸는 부모 요소로, Item 요소를 정렬하기 위해선 Container가 필수이다.

컨테이너에 적용하는 속성 : display, flex-flow, justify-content, align-content, align-items
아이템에 적용하는 속성 : order, flex, align-self

flex 속성(기본값 : 0 1 auto)
flex-grow, flex-shrink, flex-basis를 한 번에 쓸 수 있는 축약형 속성입니다.

flex-grow : flexible item들이 차지할 너비들에 대한 증가형 숫자를 지정한다.
flex-shrink : flexible item들이 차지할 너비들에 대한 감소형 숫자를 지정한다.
flex-basis : item의 길이를 지정한다.

	flex: 1;
	/* flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */
	
    flex: 1 1 auto;
	/* flex-grow: 1; flex-shrink: 1; flex-basis: auto; */
	
    flex: 1 500px;
	/* flex-grow: 1; flex-shrink: 1; flex-basis: 500px; */

참조사이트 : https://studiomeal.com/archives/197
https://heropy.blog/2018/11/24/css-flexible-box/
https://webdir.tistory.com/349