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

kyoung-jnn·2021년 6월 24일
0

HTML & CSS

목록 보기
5/9
post-thumbnail

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

profile
Beyond Frontend Engineer 🚀

0개의 댓글