[CSS] Flex 공부하기

프로젝트에서 프론트 부분을 맞게 되어 기본개념을 공부하고자 글을 작성하게 되었습니다.

Flex란?

CSS에서의 Flex는 Flexible Box 혹은 Flexbox라고 부르기도 한다.

Flex는 레이아웃 배치 전용 기능으로 고안되었고 편리하게 레이아웃을 만들 수 있다.

부트스트랩에서 자주 사용했던 기능은 주소로 첨부했다(https://getbootstrap.kr/docs/5.3/utilities/flex/)

아래는 예시로 많이 쓰이는 코드다

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

위의 코드에서 contatiner는 부모요소인 div.container이며 이것은 Flex Container와 같은 의미고

자식 요소인 div.item은 Flex Item과 같은 의미다

즉 컨테이너는 Flex의 영향을 받는 전체 공간을 말하며 설정된 속성에 따라 각각의 아이템들이 배치된다고 생각하면 된다.

(container와 item 간의 속성이 나뉜다)

display
- flex
  - flex는 가로방향으로 배치되고 자신이 가진 내용물의 width 만큼만 차지하게 된다.
  - inline요소처럼 배치 되고 height는 컨테이너의 높이만큼 늘어난다.
  - flex를 적용하게 되면 직접 연결된 자식들은 모두 flex적용을 받는다.
  - 레이아웃 구성시 여러 열과 행을 가진 컨테이너를 생성하는 사용 하면 좋다
- inline-flex
  - flex 처럼 가로 방향으로 배치되지만 몇 가지 차이점이 있다.
  - flex는 부모 요소의 가로 너비를 기반으로 작동하고 div나 section과 같은 블록요소에서 사용되지만 inline-flex는 인라인 요소로 동작하므로 다른 인라인 요소와 함께 같은 줄에 위치할 수 있다.
  - 또한 flex와는 다르게 기본 너비는 내부 콘텐츠의 크기에 따라 결정되고 조절된다.
  - 주로 텍스트 라인 내에서 레이아웃을 조정하고자 할때 사용하면 좋다.(ex- 텍스트 사이에 아이콘, 작은 레이아웃 조각 배치)

.container {
	display: flex;
	/* display: inline-flex; */
}

배치 방향 설정하기

줄 넘김 처리 설정하기

flex-flow
flex-direction과 flex-wrap을 한꺼번에 지정할 수 있는 단축 속성이다.
사용 방법은 flex-direction의 속성, flex-wrap의 속성순으로 적으면 된다.
- 예시) flex-flow: flex-direction속성 flex-wrap 속성

.container {
  display: flex;
  flex-flow: row wrap;
}
위 예제에서는 Flex 컨테이너의 아이템들이 행 방향으로 배치되고, 너비를 초과할 경우 여러 줄에 걸쳐 표시된다.

메인축 방향 정렬

수직축 방향 정렬

여러 행 정렬

참고한 사이트

이번에야말로 CSS Flex를 익혀보자

studiomeal.com

[CSS]Flex 속성 총정리/ display:flex 이 뭘까

(그냥 나 혼자서 보려고 정리한 거...) FlexBox는 css의 display 요소 중 하나이다. 이는 기존의 display 요소들이 가지는 단점을 보완하기 위해 생겼다! 그럼 먼저 display 속성에 들어가는 기존 요소에 대

kill-xxx.tistory.com

Flex 사용방법과 속성

Flex 가이드

lanace.github.io