flexbox

1차원 레이아웃과 정렬을 간단하게 처리할 수 있도록 설계된 CSS 레이아웃 모델

플렉스 컨테이너: Flexbox를 활성화하는 요소로, display: flex 또는 display: inline-flex를 설정한 부모 요소.

플렉스 아이템: 컨테이너 안의 자식 요소.

<div class="container">
	<div class="item">helloflex</div>
	<div class="item">abc</div>
	<div class="item">helloflex</div>
</div>

부모 요소인 div.container를 Flex Container(플렉스 컨테이너)라고 부르고,

자식 요소인 div.item들을 Flex Item(플렉스 아이템)이라고 부릅니다.

display: flex

flex 컨테이너에 display: flex를 적용하는게 시작

.container {
	display: flex;
	/* display: inline-flex; */ //inline-flex는 inline-block처럼 동작
}

flex 아이템들은 가로 방향으로 배치되고, 자신이 가진 내용물의 width 만큼만 차지하게 된다. height는 컨테이너의 높이만큼 늘어난다.

flex-direction

배치되는 축의 방향을 결정하는 것.

.container {
	flex-direction: row;
	/* flex-direction: column; */
	/* flex-direction: row-reverse; */
	/* flex-direction: column-reverse; */
}

flex-wrap

컨테이너가 더 이상 아이템들을 한 줄에 담을 여유 공간이 없을 때 아이템 줄바꿈을 어떻게 할지 결정하는 속성

.container {
	flex-wrap: nowrap;
    //디폴트, 요소가 삐져나올 수 있음
	/* flex-wrap: wrap; */
    //요소가 공간이 없으면 다음 줄로 넘어감
	/* flex-wrap: wrap-reverse; */
    //요소가 공간이 없으면 이전 줄로 넘어감
}

flex-flow

flex-direction과 flex-wrap을 한꺼번에 지정할 수 있는 단축 속성

.container {
	flex-flow: row wrap;
	/* 아래의 두 줄을 줄여 쓴 것 */
	/* flex-direction: row; */
	/* flex-wrap: wrap; */
}

justify-content, align-items

justify-content: 메인축 정렬, 플러터에서 mainAxisAlignment 같다.

align-items: 메인축의 수직 정렬, crossAxisAlignment 같다.

.container {
	justify-content: flex-start;
    //디폴트, 시작점으로 정렬
	/* justify-content: flex-end; */
    //끝점으로 정렬
	/* justify-content: center; */
    //가운데로 정렬
	/* justify-content: space-between; */
	/* justify-content: space-around; */
	/* justify-content: space-evenly; */ 나머지는 플러터와 같다!
}

.container {
	align-items: stretch; //디폴트, 수직축 방향으로 끝까지 늘어남.
	/* align-items: flex-start; */
    //시작점으로 정렬
	/* align-items: flex-end; */
    //끝으로 정렬
	/* align-items: center; */
    //가운데로 정렬
	/* align-items: baseline; */
    //텍스트 베이스라인 기준으로 정렬
}

align-content

flex-wrap: wrap;이 설정된 상태에서, 아이템들의 행이 2줄 이상 되었을 때의 수직축 방향 정렬을 결정.

.container {
	flex-wrap: wrap;
	align-content: stretch;
	/* align-content: flex-start; */
	/* align-content: flex-end; */
	/* align-content: center; */
	/* align-content: space-between; */
	/* align-content: space-around; */
	/* align-content: space-evenly; */
}

나머지 속성은 추후에 더 공부하고 포스팅 하겠다!

출처
https://studiomeal.com/archives/197
https://developer.mozilla.org/ko/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox