[CSS] flex

• 레이아웃을 위한 전용 기능이기 때문에 float나 inline-block보다 강력하고 편리하다.

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

• 부모 요소를 flex container라 부르고 자식 요소를 flex item이라 부른다.

flex 적용

• display 속성으로 flex를 적용할 수 있다

.container {
	display: flex;
}

• flex 아이템들은 가로 방향으로 배치되며 contents의 width만큼 차지하게 된다.
• 아이템들이 배치된 방향의 축을 메인축(main axis), 메인축과 수직인 축을 교차축 (cross axis)이라 부른다.
• height는 컨테이너의 높이만큼 늘어난다.

flex-direction

.container {
	flex-direction: row;

• 아이템들이 배치되는 축의 방향을 결정하는 속성이다.
  • row(기본값) : 아이템들이 가로 방향으로 배치된다.
  • row-reverse : 아이템들이 역순으로 가로 배치된다.
  • column : 아이템들이 세로 방향으로 배치된다.
  • column-reverse : 아이템들이 역순으로 세로 배치된다.

flex-wrap

.container {
	flex-wrap: nowrap;

• 컨테이너가 더 이상 아이템들을 한 줄에 담을 여유가 없을 때, 줄바꿈을 어떻게 할지 결정하는 속성이다.
  • nowrap(기본값) : 줄바꿈 없이 넘치도록 한다.
  • wrap : 줄바꿈을 한다.
  • wrap-reverse : 줄바꿈을 하되 아이템을 역순으로 배치한다.

justify-content

.container {
	**justify-content**: flex-start;
}

• 메인축 방향으로 아이템들을 정렬하는 속성이다.
  • flex-start(기본값) : 아이템들을 시작점으로 정렬한다.
  • flex-end : 아이템들을 끝점으로 정렬한다.
  • center : 아이템들을 가운데로 정렬한다.
  • space-between : 아이템들 사이에 균일한 간격을 두어 정렬한다.
  • space-around : 아이템들 둘레에 균일한 간격을 두어 정렬한다.
  • space-evenly : 아이템들 사이와 양 끝에 균일한 두어 정렬한다.

• 아이템들의 행이 2줄 이상 되었을 때 align-content 속성을 유사하게 사용할 수 있다.

align-items

.container {
	**align-items**: stretch;
}

• 수직축 방향으로 아이템을들 정렬하는 속성이다.
  • stretch(기본값) : 아이템들이 수직축 방향으로 끝까지 늘어난다.
  • flex-start : 아이템들을 시작점으로 정렬한다.
  • flex-end : 아이템들을 끝점으로 정렬한다.
  • center : 아이템들을 가운데로 정렬한다.
  • baseline : 아이템들을 텍스트 베이스라인 기준으로 정렬한다.

flex-basis

• flex 아이템의 기본 점유 크기를 설정하는 속성이다.

.item {
	flex-basis: auto; 
	/* flex-basis: 0; */
	/* flex-basis: 50%; */
	/* flex-basis: 300px; */
	/* flex-basis: 10rem; */
	/* flex-basis: content; */
}

• flex-basis 값보다 컨텐츠의 크기가 더 크면 크기가 유지된다.
• width를 설정하면 설정 값에 맞춰진다.

flex-grow

• 아이템이 flex-basis의 값보다 커질 수 있는지를 결정하는 속성이다.

.item {
	flex-grow: 1;
	/* flex-grow: 0; */ /* 기본값 */
}

• 0보다 큰 값이 설정되면 해당 아이템이 유연한 박스로 변하고 원래의 크기보다 커져 빈 공간을 메우게 된다.
• flex-grow에 들어가는 숫자는 여백의 비율을 의미한다.

flex-shrink

• 아이템이 flex-basis의 값보다 작아질 수 있는지를 결정하는 속성이다.

.item {
	flex-basis: 150px;
	flex-shrink: 1; /* 기본값 */
}

• 0보다 큰 값이 설정되면 해당 아이템이 유연한 박스로 변하고 flex-basis보다 작아질 수 있다.
• 기본값이 1이기 때문에 따로 세팅하지 않아도 아이템이 flex-basis보다 작아질 수 있다.
• 고정폭의 column을 쉽게 만들 수 있다.

align-self

• 아이템을 수직축으로 정렬하는 속성이다.

.item {
	align-self: auto;
	/* align-self: stretch; */
	/* align-self: flex-start; */
	/* align-self: flex-end; */
	/* align-self: center; */
	/* align-self: baseline; */
}

• align-self는 align-items보다 우선권이 있다.

P.S.

flex만으로도 구현하고자 하는 레이아웃은 모두 구현할 수 있겠다는 생각이 들었다😲 특히 flex-basis 속성이 굉장히 놀라웠다. 특정 값을 세팅하는 것이 아니라 내부적으로 기준값을 잡아준다는 점에서, 페이지를 깔끔하게 구현하기 참 좋은 속성이라는 생각이 들었다🙃

참고 문서

• 이번에야말로 CSS Flex를 익혀보자 by 스튜디오밀
• Flexbox by alexcamachogz