[HTML/CSS] Flex / flex-direction, justify-content, align-items

flex 적용

flex, flexbox 레이아웃을 사용하기 위해선 아래와 같은 CSS 속성을 적용해야합니다.

.container {
	display: flex;
}

flex-direction

flex 레이아웃에서 메인 축(Main Axis)는 가로축이 되고 수직축 또는 교차축(Cross Axis)는 메인 축에 수직 이 됩니다.
축의 방향을 결정하기 위해 속성을 이용합니다. (default: row)

.container {
	display: flex;
    	flex-direction: row;
}

.container {
	display: flex;
    	flex-direction: column;
}

justify-content

justify-content는 메인축 방향으로 아이템들을 정렬하는 속성입니다.

• flex-start (기본값)
• flex-end
• center
• space-between
• space-around
• space-evenly

.container {
	display: flex;
    	justify-content: center;
        justify-content: space-between;
        justify-content: space-around;
}

align-items

align-items는 수직축 방향으로 아이템들을 정렬하는 속성입니다.

• stretch (기본값)
• flex-start
• flex-end
• center
• baseline

.container {
	display: flex;
    	align-items: center;
        align-items: flex-end;
}

참고
https://studiomeal.com/archives/197
https://ichi.pro/ko/post/217801130706546