프론트 개발

[ FE ] Do it! 프런트엔드 웹디자인 입문 09-3 플렉스 박스 사용하기

norepinephrine 2026. 2. 24. 18:24

반응형 웹 디자인을 구현하는 다른 방법은 플렉스 박스를 사용한 플렉스 박스 레이아웃이다

반응형 레이아웃을 CSS만으로 구현하는 것은 쉽지 않은데, 플렉스 박스를 사용하면 화면을 분할하고 배치하는 것이 쉬워진다

플렉스 박스 레이아웃

플렉스 박스 레이아웃이란 그리드 레이아웃을 기본으로 해 플렉스 아이템을 원하는 위치에 배치하는 것이다

플렉스 박스 레이아웃은 플렉스 아이템의 크기뿐만 아니라 배치하는 방향과 순서, 정렬 방법, 간격 등을 제어할 수 있다.

플렉스 박스 레이아웃을 사용하려면 콘텐츠를 플렉스 컨테이너로 묶어줘야 한다 그리고 컨테이너 안에 플렉스 박스를 배치한다

플렉스 박스에는 이미지나 텍스트 등 웹 문서 요소들이 들어있고, 플렉스 박스는 주축을 따라 왼쪽에서 오른쪽으로 배치되고 주축의 끝점까지 닿으면 교차 축을 따라 아래로 이동한 후 다시 왼쪽에서 오른쪽으로 배치되는 방식을 사용한다

플렉스 박스 속성

display : 플렉스 아이템을 감싸는 요소를 플렉스 컨테이너로 쓰려고 할 때 사용하는 속성

flex 컨테이너 안의 플렉스 아이템을 블록 레벨 요소로 배치

inline-flex 컨테이너 안의 플렉스 아이템을 인라인 레벨 요소로 배치

flex-direction : 플렉스 컨테이너 안에서 플렉스 아이템을 배치하는 주축과 방향을 지정한다 기본값 : row

row 주축을 가로로 지정, 왼쪽에서 오른쪽으로 배치

row-reverse 주축을 가로로 지정, 오른쪽에서 왼쪽으로 배치
column 주축을 세로로 지정, 위쪽에서 아래쪽으로 배치
column-reverse 주축을 세로로 지정, 아래쪽에서 위쪽으로 배치

EX.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>플렉서블 박스 레이아웃</title>
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1">
    <style>
      .container {
        display:flex;
        background-color:#eee;
        border:1px solid #222;
        margin-bottom:10px;
      }
      .opt1{
        flex-direction: row;        
      }
      .opt2{
        flex-direction: row-reverse;        
      }
      .opt3{
        flex-direction: column;        
      }
      .opt4{
        flex-direction: column-reverse;        
      }                  
      .box {
        padding:5px 45px;
        margin:5px;   
				width:80px;
        background-color:#222;   
      }
      p {
        color:#fff;
        text-align: center;
      }
    </style>
</head>
<body>
  <div class="container opt1">
    <div class="box"><p>1</p></div>
    <div class="box"><p>2</p></div>
    <div class="box"><p>3</p></div>
  </div>
  <div class="container opt2">
    <div class="box"><p>1</p></div>
    <div class="box"><p>2</p></div>
    <div class="box"><p>3</p></div>
  </div>
  <div class="container opt3">
    <div class="box"><p>1</p></div>
    <div class="box"><p>2</p></div>
    <div class="box"><p>3</p></div>
   </div>
  <div class="container opt4">
    <div class="box"><p>1</p></div>
    <div class="box"><p>2</p></div>
    <div class="box"><p>3</p></div>
  </div>            
</body>
</html>

flex-wrap : 플렉스 아이템을 여러줄에 걸쳐 표시한다 기본값은 nowrap

flex-wrap 속성을 wrap이나 wrap-reverse 로 지정한 후 브라우저 화면 너비를 늘리거나 줄여보면 플렉스 컨테이너 너비에 따라 여러줄로 표시되는 것을 볼 수 있다

nowrap 플렉스 아이템을 한줄에 표시

wrap 플렉스 아이템을 여러 줄에 표시
wrap-reverse 플렉스 아이템을 여러 줄에 표시하되 시작점과 끝점이 바뀜

EX.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>플렉서블 박스 레이아웃</title>
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1">
    <style>
      .container {
        display:flex;
        background-color:#eee;
        border:1px solid #222;
        margin-bottom:10px;
      }
      .opt1{
        flex-wrap: nowrap;        
      }
      .opt2{
        flex-wrap: wrap;           
      }
      .opt3{
        flex-wrap: wrap-reverse;           
      }                 
      .box {
        padding:5px 45px;
        margin:5px;   
        background-color:#222;   
      }
      p {
        color:#fff;
        text-align: center;
      }
    </style>
</head>
<body>
  <div class="container opt1">
    <div class="box"><p>1</p></div>
    <div class="box"><p>2</p></div>
    <div class="box"><p>3</p></div>
    <div class="box"><p>4</p></div>
    <div class="box"><p>5</p></div>
    <div class="box"><p>6</p></div>    
  </div>
  <div class="container opt2">
    <div class="box"><p>1</p></div>
    <div class="box"><p>2</p></div>
    <div class="box"><p>3</p></div>
    <div class="box"><p>4</p></div>
    <div class="box"><p>5</p></div>
    <div class="box"><p>6</p></div>    
  </div>
  <div class="container opt3">
    <div class="box"><p>1</p></div>
    <div class="box"><p>2</p></div>
    <div class="box"><p>3</p></div>
    <div class="box"><p>4</p></div>
    <div class="box"><p>5</p></div>
    <div class="box"><p>6</p></div>    
   </div>          
</body>
</html>

flex-flow : flex-direction 속성과 flex-wrap 속성을 한꺼번에 지정한다 기본값은 row, nowrap

EX.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>플렉서블 박스 레이아웃</title>
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1">
    <style>
      .container {
        display:flex;
        background-color:#eee;
        border:1px solid #222;
        margin-bottom:10px;
      }
      .opt1{
        flex-flow: row wrap;        
      }
      .opt2{
        flex-flow: row nowrap;           
      }                
      .box {
        padding:5px 45px;
        margin:5px;   
        background-color:#222;   
      }
      p {
        color:#fff;
        text-align: center;
      }
    </style>
</head>
<body>
  <div class="container opt1">
    <div class="box"><p>1</p></div>
    <div class="box"><p>2</p></div>
    <div class="box"><p>3</p></div>
    <div class="box"><p>4</p></div>
    <div class="box"><p>5</p></div>
    <div class="box"><p>6</p></div>    
  </div>
  <div class="container opt2">
    <div class="box"><p>1</p></div>
    <div class="box"><p>2</p></div>
    <div class="box"><p>3</p></div>
    <div class="box"><p>4</p></div>
    <div class="box"><p>5</p></div>
    <div class="box"><p>6</p></div>    
  </div>        
</body>
</html>

justify-content : 주축에서 플렉스 아이템 간 간격을 지정한다

이 속성은 text-align 속성을 사용해 텍스트 정렬 방법을 지정하는 것과 비슷하다

flex-start 시작점에 맞춰 배치

flex-end 끝점에 맞춰 배치
center 중앙에 맞춰 배치
space-between 첫번째 아이템과 끝 아이템을 시작점과 끝점에 배치한 후 나머지 아이템은 그 사이에 같은 간격으로 배치
space-around 모든 아이템을 같은 간격으로 배치

EX.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>플렉서블 박스 레이아웃</title>
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1">
    <style>
      .container {
        display:flex;
        background-color:#eee;
        border:1px solid #222;
        margin-bottom:20px;
      }
      .opt1{
        justify-content: flex-start;    
      }
      .opt2{
        justify-content: flex-end;        
      }
      .opt3{
        justify-content: center;       
      }
      .opt4{
        justify-content: space-between;       
      }    
      .opt5{
        justify-content: space-around;       
      }                     
      .box {
        padding:5px 45px;
        margin:5px;   
        background-color:#222;   
      }
      p {
        color:#fff;
        text-align: center;
      }
    </style>
</head>
<body>
  <div class="container opt1">
    <div class="box"><p>1</p></div>
    <div class="box"><p>2</p></div>
    <div class="box"><p>3</p></div>
    <div class="box"><p>4</p></div>
  </div>
  <div class="container opt2">
    <div class="box"><p>1</p></div>
    <div class="box"><p>2</p></div>
    <div class="box"><p>3</p></div>
    <div class="box"><p>4</p></div>
  </div>
  <div class="container opt3">
    <div class="box"><p>1</p></div>
    <div class="box"><p>2</p></div>
    <div class="box"><p>3</p></div>
    <div class="box"><p>4</p></div>
   </div>
  <div class="container opt4">
    <div class="box"><p>1</p></div>
    <div class="box"><p>2</p></div>
    <div class="box"><p>3</p></div>
    <div class="box"><p>4</p></div>
  </div>            
  <div class="container opt5">
    <div class="box"><p>1</p></div>
    <div class="box"><p>2</p></div>
    <div class="box"><p>3</p></div>
    <div class="box"><p>4</p></div>
  </div>    
</body>
</html>

align-content : 교차 축에서 플렉스 아이템 간 간격을 지정한다

justify-content 속성과 align-content 속성에서 사용하는 속성값은 stretch 만 빼고 같다

flex-start 시작점에 맞춰 배치

flex-end 끝점에 맞춰 배치
center 중앙에 맞춰 배치
space-between 첫번째 아이템과 끝 아이템을 시작점과 끝점에 배치한 후 나머지 아이템은 그 사이에 같은 간격으로 배치
space-around 모든 아이템을 같은 간격으로 배치
stretch 플렉스 아이템을 늘려서 간격 없이 배치

stretch 값일 때 간격 없이 배치된다고 했는데 다음 예제에서 플렉스 아이템 사이에 간격이 생기는 것은 margin을 지정했기 때문이다

EX.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>플렉서블 박스 레이아웃</title>
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1">
    <style>
      .container {
        width:220px;
        height:250px;
        display:flex;
        flex-flow: row wrap;
        background-color:#eee;
        border:1px solid #222;
        margin-bottom:20px;
      }
      .opt1{
        align-content: flex-start;    
      }
      .opt2{
        align-content: flex-end;        
      }
      .opt3{
        align-content: center;       
      }
      .opt4{
        align-content: space-between;       
      }    
      .opt5{
        align-content: space-around;       
      }
      .opt6{
        align-content: stretch;      
      }                            
      .box {
        padding:5px 45px;
        margin:5px;   
        background-color:#222;   
      }
      p {
        color:#fff;
        text-align: center;
      }
    </style>
</head>
<body>
  <div class="container opt1">
    <div class="box"><p>1</p></div>
    <div class="box"><p>2</p></div>
    <div class="box"><p>3</p></div>
    <div class="box"><p>4</p></div>
  </div>
  <div class="container opt2">
    <div class="box"><p>1</p></div>
    <div class="box"><p>2</p></div>
    <div class="box"><p>3</p></div>
    <div class="box"><p>4</p></div>
  </div>
  <div class="container opt3">
    <div class="box"><p>1</p></div>
    <div class="box"><p>2</p></div>
    <div class="box"><p>3</p></div>
    <div class="box"><p>4</p></div>
   </div>
  <div class="container opt4">
    <div class="box"><p>1</p></div>
    <div class="box"><p>2</p></div>
    <div class="box"><p>3</p></div>
    <div class="box"><p>4</p></div>
  </div>            
  <div class="container opt5">
    <div class="box"><p>1</p></div>
    <div class="box"><p>2</p></div>
    <div class="box"><p>3</p></div>
    <div class="box"><p>4</p></div>
  </div>    
  <div class="container opt6">
    <div class="box"><p>1</p></div>
    <div class="box"><p>2</p></div>
    <div class="box"><p>3</p></div>
    <div class="box"><p>4</p></div>
  </div>  
</body>
</html>

align-items : 교차 축에서 플렉스 아이템의 상대 위치와 크기를 지정한다

flex-start 세로로 맨 위에 배치

flex-end 세로로 맨 아래에 배치
center 세로로 중앙에 배치
baseline 세로로 기준선에 배치
stretch 플렉스 아이템을 늘려서 간격 없이 배치

EX.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>플렉서블 박스 레이아웃</title>
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1">
    <style>
      .container {
        width:100%;
        height:150px;
        display:flex;
        background-color:#eee;
        border:1px solid #222;
        margin-bottom:20px;
      }
      .opt1{
        align-items: flex-start;    
      }
      .opt2{
        align-items: flex-end;         
      }
      .opt3{
        align-items: center;       
      }
      .opt4{
        align-items: stretch;      
      }                            
      .box {
        padding:5px 45px;
        margin:5px;   
        background-color:#222;   
      }
      p {
        color:#fff;
        text-align: center;
      }
    </style>
</head>
<body>
  <div class="container opt1">
    <div class="box"><p>1</p></div>
    <div class="box"><p>2</p></div>
    <div class="box"><p>3</p></div>
    <div class="box"><p>4</p></div>
  </div>
  <div class="container opt2">
    <div class="box"><p>1</p></div>
    <div class="box"><p>2</p></div>
    <div class="box"><p>3</p></div>
    <div class="box"><p>4</p></div>
  </div>
  <div class="container opt3">
    <div class="box"><p>1</p></div>
    <div class="box"><p>2</p></div>
    <div class="box"><p>3</p></div>
    <div class="box"><p>4</p></div>
   </div>
  <div class="container opt4">
    <div class="box"><p>1</p></div>
    <div class="box"><p>2</p></div>
    <div class="box"><p>3</p></div>
    <div class="box"><p>4</p></div>
  </div>            
</body>
</html>

플렉스 아이템 속성

플렉스 컨테이너에서는 플렉스 아이템의 배치 방법이나 간격 등을 조절할 수 있지만 플렉스 아이템에서 사용할 수 있는 속성도 있다

align-self : align-items 속성은 플렉스 컨테이너에서 플렉스 아이템의 배치 방법을 한꺼번에 조절하는 반면, align-self 속성을 사용하면 플렉스 아이템을 따로 원하는 형태로 배치할 수 있다

flex-start 세로로 맨 위에 배치

flex-end 세로로 맨 아래에 배치
center 세로로 중앙에 배치
baseline 세로로 기준선에 배치
stretch 플렉스 아이템을 늘려서 간격 없이 배치

align-items 속성과 align-self 속성을 모두 사용했다면 align-self 속성값이 적용된다

EX.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>플렉서블 박스 레이아웃</title>
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1">
    <style>
      .container {
        width:100%;
        height:150px;
        display:flex;
        background-color:#eee;
        border:1px solid #222;
        margin-bottom:20px;
      }      
      .box1{
        align-self: flex-start;    
      }
      .box2{
        align-self: flex-end;        
      }
      .box3{
        align-self: center;       
      } 
      .box4{
        align-self: baseline;
      }      
      .box5{
        align-self: stretch;      
      }                           
      .box {
        padding:5px 45px;
        margin:5px;   
        background-color:#222;   
      }
      p {
        color:#fff;
        text-align: center;
      }
    </style>
</head>
<body>
  <div class="container">
    <div class="box box1"><p>1</p></div>
    <div class="box box2"><p>2</p></div>
    <div class="box box3"><p>3</p></div>
    <div class="box box4"><p>4</p></div>
    <div class="box box5"><p>5</p></div>
  </div>          
</body>
</html>

flex : 플렉스 아이템의 너비를 늘이거나 줄일 수 있도록 세 가지 값으로 표시한다

flex-grow와 flex-shrink, flex-basis 속성은 별개의 속성이지만 따로 쓰지 않고 flex 속성으로 묶어 사용한다

flex-grow 늘릴 비율

flex-shrink 줄일 비율
flex-basis 기본 크기
auto 플렉스 아이템의 width / height 값에 의해 크기 결정. 컨테이너 공간에 따라 늘리거나 줄임
inital 플렉스 아이템의 width / height 값에 의해 크기 결정. 컨테이너 공간이 부족하면 최소 크기까지 줄임. 기본값

flex 속성은 기본으로 3개 값을 사용하지만, 값을 하나만 지정할 수도 있고, 3개 모두 지정할 수도 있다

EX.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>플렉서블 박스 레이아웃</title>
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1">
    <style>
      .container {
        width:100%;
        height:150px;
        display:flex;
        align-items:center;
        background-color:#eee;
        border:1px solid #222;
        margin-bottom:20px;
      }      
      .box1{
        flex:2;    
      }
      .box2{
        flex:30px;         
      }
      .box3{
        flex:1 40px;         
      } 
      .box4{
        flex:1 1;  
      }      
      .box5{
        flex:2 2 0;        
      }                           
      .box {
        padding:5px 10px;
        margin:5px;   
        background-color:#222;   
      }
      p {
        color:#fff;
        text-align: center;
      }
    </style>
</head>
<body>
  <div class="container">
    <div class="box box1"><p>1</p></div>
    <div class="box box2"><p>2</p></div>
    <div class="box box3"><p>3</p></div>
    <div class="box box4"><p>4</p></div>
    <div class="box box5"><p>5</p></div>
  </div>          
</body>
</html>

'프론트 개발' 카테고리의 다른 글

[ FE ] Do it! 프런트엔드 웹디자인 입문 10-2 풀 스크린 배경 동영상 직접 만들기  (0) 2026.02.25
[ FE ] Do it! 프런트엔드 웹디자인 입문 10-1 풀 스크린 배경 이미지 직접 만들기  (0) 2026.02.25
[ FE ] Do it! 프런트엔드 웹디자인 입문 09-2 jQuery 플러그인을 사용해 그리드 레이아웃 만들기  (0) 2026.02.24
[ FE ] Do it! 프런트엔드 웹디자인 입문 09-1 다단 칼럼을 사용해 그리드 레이아웃 만들기  (0) 2026.02.23
[ FE ] Do it! 프런트엔드 웹디자인 입문 08-2 패럴랙스 스크롤링 효과 만들기  (0) 2026.02.19

'프론트 개발'의 다른글

  • 현재글[ FE ] Do it! 프런트엔드 웹디자인 입문 09-3 플렉스 박스 사용하기

관련글

티스토리툴바