프로그래밍/css 심화

CSS 심화 공부(5) - 플렉스 컨테이너의 속성(1) 레이아웃 방식 : display, direction, wrap, flow

lamarcK 2025. 3. 12. 14:48

앞서 말했듯이 플렉스 컨테이너(Flex Container)는 플렉스 아이템을 담는 부모 요소이다.

전체적인 레이아웃의 형식을 결정하기 때문에 어쩌면 가장 중요한 요소라고 할 수 있다.

플렉스 컨테이너의 레이아웃 속성

1. display

플렉스 컨테이너를 정의한다.

  • display: flex : 블록 레벨 플렉스 컨테이너를 생성합니다.
  • display: inline-flex : 인라인 플렉스 컨테이너를 생성합니다. 
    .container {
    display: flex;
}

플렉스 박스를 적용하기 위해서는 css에 반드시 포함이 되야 한다. 혹은 style 태그를 사용해서 html에서 바로 사용할 수도 있다.

<div style="display: flex; justify-content: center; align-items: center;">
  <p>플렉스 아이템 1</p>
  <p>플렉스 아이템 2</p>
</div>

2. flex-direction

주축의 방향을 설정한다.

  • flex-direction: row : 가로 방향 (기본값)
  • flex-direction: column : 세로 방향
  • flex-direction: row-reverse : 가로 역방향
  • flex-direction: column-reverse : 세로 역방향
.container {
    display: flex;
    flex-direction: column;
}

 

주축의 방향이란 플렉스 아이템이 배치되는 방향이라고 할 수 있다.

flex-direction: row는 가로로 배치, lex-direction: column는 세로로 배치한다.

만약에 flex-direction: row-reverse : 가로 역방향을 사용한다면 주축이 반대로 바뀌어서 오른쪽에서 왼쪽으로 배치가 된다.

교차축은 어떻게 결정되나요?

주축이 결정될 경우 교차축은 자동으로 결정된다. row를 주축으로 잡았을 경우 교차축은 column이 되는 것이다.

3. flex-wrap

아이템들이 컨테이너를 벗어날 경우 줄바꿈을 설정한다.

  • flex-wrap: nowrap : 줄바꿈 없음 (기본값)
  • flex-wrap: wrap : 줄바꿈
  • flex-wrap: wrap-reverse : 역방향 줄바꿈
.container {
    display: flex;
    flex-wrap: wrap;
}

 

즉 flex-item 요소들이 강제로 한줄에 배치되게 할 것인지, 또는 가능한 영역 내에서 벗어나지 않고 여러행으로 나누어 표현 할 것인지 결정하는 속성이라고 할 수 있다.

만약에 하나의 플렉스 박스 내에 구성 요소가 많아져서 부모의 크기보다 커진다면 flex박스에서는 자동으로 자식 요소의 크기를 조정한다.

더보기 
.mbox1{width: 500px;
height: 500px;
display: flex;
border: 2px solid black;
}
.box1 {
display: flex;
flex-direction: row;
 width: 100px;
 height: 100px;
 background-color: #4f79eb;
 font-size: 30px;
 color: white;
 justify-content: center;
 align-items: center;
 border: 2px solid black;
 margin: 2px;
}
<body>
<div class="mbox1">
  <div class="box1">A</div>
  <div class="box1">B</div>
  <div class="box1">C</div>
  <div class="box1">D</div>
  <div class="box1">E</div>
  <div class="box1">F</div>
</div>
  </body>

그런데 여기서 flex-wrap: wrap;을 flex container에 추가해준다면 크기를 조정하지 않고 자동으로 줄 바꿈이 되는 것이다.

더보기 
.mbox1{width: 500px;
height: 500px;
display: flex;
border: 2px solid black;
flex-wrap: wrap;
}

단 flex item의 수가 너무 많아져서 flex container의 크기를 초과해버리면 밖으로 넘쳐나게된다.

 

아이템이 콘테이너 밖으로 넘쳐버리면 어떻게 하나요?

이런 경우 overflow 속성을 사용해서 넘쳐나는 부분을 정리해주는 것이 좋다.

더보기
  • overflow : 요소 내용이 넘칠 때 처리 방법 설정
  • overflow-x : 가로 방향 넘침 처리 설정
  • overflow-y : 세로 방향 넘침 처리 설정
  • overflow: visible : 넘치는 내용 그대로 표시
  • overflow: hidden : 넘치는 내용 잘라내어 숨김
  • overflow: scroll : 항상 스크롤 막대 표시
  • overflow: auto : 내용 넘칠 때만 스크롤 막대 표시
  • overflow: clip : 내용 잘라내고 스크롤 막대 및 스크롤 동작 차단
  • overflow: overlay : 스크롤 막대를 내용 위에 겹쳐 표시 (일부 브라우저 지원)

각각 auto, scroll, hidden 속성이다.

보다 시피 auto는 스크롤을 넘칠때만 표시하기 때문에 가로축으로 넘치는 요소가 없기 때문에 가로 스크롤은 표시가 되지 않았다.

반면 scroll은 스크롤을 항상 표시하기 때문에 가로축의 스크롤도 함께 표시됐다.

hidden은 넘친 부분을 보이지 않도록 하여 잘린 것처럼 표시가 된다.

그런데 flex-direction과 flex-wrap을 일일히 설정해주는 것은 코드 가독성이나 간결성 측면에서 문제가 있을 수 있다.

때문에 flex-flow 속성을 사용해서 좀 더 간결하게 속성을 설정할 수 있다.

4. flex-flow 

flex-flow 속성

더보기

 

  • <flex-direction>: 플렉스 아이템의 배치 방향을 설정합니다.
    • row: 가로 방향 (기본값)
    • row-reverse: 가로 역방향
    • column: 세로 방향
    • column-reverse: 세로 역방향
  • <flex-wrap>: 플렉스 아이템의 줄바꿈 방식을 설정합니다.
    • nowrap: 줄바꿈 없음 (기본값)
    • wrap: 줄바꿈
    • wrap-reverse: 역방향 줄바꿈

 

예를 들어 다음과 같이 사용할 수 있다.
.container {
    display: flex;
    flex-flow: row wrap; /* 가로 방향으로 줄바꿈 */
}

.container2 {
    display: flex;
    flex-flow: column nowrap; /* 세로 방향으로 줄바꿈 없음 */
}

 

기존에 2줄로 작성하던 코드를 1줄로 줄일 수 있기때문에 1. 코드 간결성, 2. 가독성 향상, 3. 유지보수 용이성 등의 장점이 있다.

'프로그래밍 > css 심화' 카테고리의 다른 글

CSS 심화 공부(7) - flex item 속성(1) : flex item order  (0) 2025.03.12
CSS 심화 공부(6) - 플렉스 컨테이너의 속성(2) 정렬 방식 : justify-content, align-items, align-content  (0) 2025.03.12
CSS 심화 공부(4) - Flexbox(플렉스 박스)  (0) 2025.03.12
CSS 심화 공부(3) - 동적 변화(animation)  (0) 2025.03.11
CSS 심화 공부(2) - 동적 변화(transform)  (0) 2025.03.11

'프로그래밍/css 심화'의 다른글

  • 현재글CSS 심화 공부(5) - 플렉스 컨테이너의 속성(1) 레이아웃 방식 : display, direction, wrap, flow

관련글

티스토리툴바