스터디일지/CSS

[CSS] Flex 공부하기

똥쟁이핑크 2024. 2. 25. 21:25

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

 

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 간의 속성이 나뉜다)

https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Flexbox/flex_terms.png

 

Flex의 속성(Container)

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

https://lh3.googleusercontent.com/proxy/Ikg3l7TqDIs8qexoep2TaGDMb15cA7ZfQZitCMBd2Atq_JC63MZIQFx4BxeHhA2757SuxRmhW6Bt2B_nWkE4nJZzqV0tEkgqhlRySPHgubHU

 

배치 방향 설정하기

  • flex-direction - 아이템이 배치 되는 축의 방향을 결정한다. 
    • row
      • 기본값이며 아이템들이 가로 방향(행)으로 배치 된다.
    • column
      • 아이템들이 세로 방향(열)으로 배치된다
    • row-reverse
      • 아이템들이 역순으로 가로 배치 된다.
    • column-reverse
      • 아이템들이 역순으로 세로 배치 된다.

https://scaler.com/topics/images/flex-direction-all-properties.webp

 

 

줄 넘김 처리 설정하기

  • flex-wrap
    • nowrap
      • 기본값이며 줄 바꿈을 하지 않고 한 줄에 표시된다.
    • wrap
      • 아이템이 Flex 컨테이너의 너비를 초과하면 다음줄로 넘어간다.
      • 여러 줄로 표시될 수도 있다.
    • wrap-reverse
      • wrap과 비슷하며 대신 순서가 역순으로 표시된다.

https://samanthaming.gumlet.io/flexbox30/10-flex-wrap.jpg.gz

 

  • flex-flow
    flex-direction과 flex-wrap을 한꺼번에 지정할 수 있는 단축 속성이다.
    사용 방법은 flex-direction의 속성, flex-wrap의 속성순으로 적으면 된다.
    • 예시) flex-flow: flex-direction속성 flex-wrap 속성
.container {
  display: flex;
  flex-flow: row wrap;
}
위 예제에서는 Flex 컨테이너의 아이템들이 행 방향으로 배치되고, 너비를 초과할 경우 여러 줄에 걸쳐 표시된다.

https://dz2cdn1.dzone.com/storage/temp/13385223-1588684929012.png

 

메인축 방향 정렬

  • justify-content
    • flex-start
      • 기본값이며 아이템들을 시작점으로 정렬한다.
    • flex-end
      • 아이템들을 끝점으로 정렬한다.
    • center
      • 아이템들을 가운데로 정렬한다.
    • space-between
      • 아이템들의 사이(between)에 균일한 간격을 만들어 준다.
      • 첫 번째 Flex 아이템은 컨테이너 시작 부분에 위치하고 마지막 Flex 아이템은 컨테이너 끝 부분에 정렬된다.
        나머지 아이템들은 그 사이에 동일한 간격을 유지하면서 정렬된다.
    • space-around
      • 아이템들의 둘레(around)에 균일한 간격을 만들어 준다.
      • 첫 번째 Flex 아이템과 마지막 Flex 아이템에는 반 간격이 적용된다.
    • space-evenly
      • 아이템들의 사이와 양 끝에 균일한 간격을 만들어 준다.

https://www.syncfusion.com/blogs/wp-content/uploads/2023/03/Flex-justify-content.png

 

수직축 방향 정렬

  • align-items
    • stretch
      • 기본값이며 아이템들이 교차 축을 따라 컨테이너의 전체 높이에 맞게 늘어난다.
    • flex-start
      • 아이템들을 교차 축의 시작점으로 정렬한다.
    • flex-end
      • 아이템들을 교차 축의 끝으로 정렬한다.
    • center
      • 아이템들을 교차 축을 따라 가운데로 정렬한다.
    • baseline
      • 아이템들을 텍스트 베이스라인 기준으로 정렬한다.

https://samanthaming.gumlet.io/flexbox30/15-align-items-row.jpg.gz

 

여러 행 정렬

  • align-content - flex-wrap: wrap이 설정된 상태에서 아이템들의 행이 2줄 이상 되었을 때 수직축 방향 정렬을 결정하는 속성이다.
    • stretch 
      • 기본 값이며 여러 줄의 Flex 아이템들이 교차 축을 따라 컨테이너의 전체 높이에 맞게 늘어난다.
    • flex-start
      • 여러 줄의 Flex 아이템들을 교차 축의 시작 부분에 정렬시킨다
    • flex-end
      • 여러 줄의 Flex 아이템들을 교차 축의 끝 부분에 정렬시킨다
    • center
      • 여러 줄의 Flex 아이템들을 교차 축을 따라 가운데에 정렬시킨다
    • space-between
      • 여러 줄의 Flex 아이템들을 교차 축에 동일한 간격으로 정렬시키고 첫 번째 줄은 컨테이너 시작 부분에 배치시키고 마지막 줄은 컨테이너의 끝 부분에 배치시킨다.
    • space-around
      • 여러 줄의 Flex 아이템들을 교차 축에 동일한 간격으로 정렬함과 동시에 시작과 
        끝 부분에 반 간격이 적용된다.
    • space-evenly
      • 여러 줄의 Flex 아이템들 사이에 동일한 간격을 유지하면서 교차 축을 따라 분산시킨다.

https://i.stack.imgur.com/ZPDMz.png

 

 

 

 

 

 

 

 

 

 

참고한 사이트

https://studiomeal.com/archives/197

 

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

 

studiomeal.com

 

https://kill-xxx.tistory.com/entry/CSSFlex-%EC%86%8D%EC%84%B1-%EC%B4%9D%EC%A0%95%EB%A6%AC-displayflex-%EC%9D%B4-%EB%AD%98%EA%B9%8C

 

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

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

kill-xxx.tistory.com

 

https://lanace.github.io/articles/Flex-guide/

 

Flex 사용방법과 속성

Flex 가이드

lanace.github.io

 

 

저작자표시 비영리 변경금지