Chapter 1-4. Flex 핵심정리 - 전체 아이템 정렬

인프런에 있는 1%코딩님의 강의 CSS Flex와 Grid 제대로 익히기 를 듣고 정리한 필기입니다. 😀

정렬관련 주요 키워드 - justify와 align

• justify는 메인축(오뎅꼬치) 방향으로 정렬하는것이고, align은 수직축(오뎅을 뜯어내는) 방향으로 정렬하는 키워드입니다.

👱메인축 방향 정렬 - justify-content

• justify 키워드는 메인축 방향으로 아이템들을 정렬하는 속성입니다.

.container {
	justify-content: flex-start;
	justify-content: flex-end;
	justify-content: center;
	justify-content: space-between;
	justify-content: space-around;
	justify-content: space-evenly;
}

• flex-start(기본값) : 아이템들을 시작점으로 정렬합니다. flex-direction이 row 일때는 왼쪽, column일때는 위입니다.

• flex-end : 아이템들을 끝점으로 정렬합니다. flex-direction이 row 일때는 오른쪽, column일때는 아래입니다.

• center : 아이템들을 가운데로 정렬합니다.

• space-between : 각 아이템 사이에 여백을 줘서 정렬합니다. 맨처음 아이템과 마지막 아이템은 양쪽 끝에 붙습니다.

• space-around : 각 아이템 주변에 동일한 여백을 줘서 정렬합니다. 이번에는 space-between처럼 맨처음 아이템과 마지막 아이템이 양쪽 끝에 붙지는 않습니다.

• space-evenly : 각 아이템의 길이에 상관없이 모든 여백이 동일합니다. 이것은 MS계열 브라우저에서는 지원이 되지 않습니다.

👱수직축 방향 정렬 - align-items

• align 키워드는 수직축 방향으로 아이템들을 정렬하는 속성입니다. justify-content와 수직 방향의 정렬이라고 생각하면 됩니다.

.container {
	align-items: stretch;
	align-items: flex-start;
	align-items: flex-end;
	align-items: center;
	align-items: baseline;
}

• stretch : 아이템들이 수직축 방향으로 컨테이너 끝까지 쭈욱 늘어납니다.

• flex-start : 아이템들이 위로 정렬됩니다.

• flex-end : 아이템들이 아래로 정렬됩니다.

• center : 아이템들이 가운대 정렬됩니다.

• baseline : 아이템들을 텍스트 베이스라인 기준으로 정렬합니다.

  보통의 언어들은 베이스라인이 문자 아래인데, 영어의 g의 경우 동그란부분은 베이스라인에 꼬리 부분은 아래로 내려가는 형태를 취하고 있습니다.

아이템을 컨테이너 한 가운데 놓는 방법

• 그림이 들어간 버튼을 가운데 정렬하려고 하면 png 파일같이 크기가 고정된 그림은 padding으로 쉽게 처리가 가능하지만 svg같은 폰트 아이콘은 크기가 다르기때문에 padding으로는 한계가 있습니다. 이때 유용하게 사용할 수 있는것이 방금 배운 것입니다. justify-content, align-items를 모두 center로 해주면 아이템이 컨테이너 한 가운데에 표시하게 됩니다.

.container {
  display: inline-flex;
  justify-content: center;
	align-items: center;
  width: 30px;
  height: 30px;
}

여러 행 정렬 - 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;
}

• stretch : 개행된 아이템과 개행되지 않은 아이템들이 수직축 방향으로 컨테이너 끝까지 쭈욱 늘어납니다. (기본값)

• flex-start : 개행된 아이템과 개행되지 않은 아이템들이 위로 정렬됩니다.

  메인축 방향을 항상 생각해야 안 헷갈립니다. 여기서는 메인축이 row로 설정되어 있다고 가정합니다.

• flex-end : 개행된 아이템과 개행되지 않은 아이템들이 아래로 정렬됩니다.

• center : 개행된 아이템과 개행되지 않은 아이템들이 가운대 정렬됩니다.

• space-between : 각 아이템 사이에 여백을 줘서 정렬합니다. 맨처음 아이템과 마지막 아이템은 위아래 끝에 붙습니다.

• space-around : 각 아이템 주변에 동일한 여백을 줘서 정렬합니다. 이번에는 space-between처럼 맨처음 아이템과 마지막 아이템이 위아래 끝에 붙지는 않습니다.

• space-evenly : 각 아이템의 길이에 상관없이 모든 여백이 동일합니다. 이것은 MS계열 브라우저에서는 지원이 되지 않습니다.

---

🌜 개인 공부 기록용 블로그입니다. 오류나 틀린 부분이 있을 경우 
언제든지 댓글 혹은 메일로 지적해주시면 감사하겠습니다! 😄

맨 위로 이동하기

Css 카테고리 내 다른 글 보러가기