[CSS] 6. Flex

Mar 10, 2025

Contents

1. Flex 2. Flexbox 3. flex-direction 4. justify-content 5. align-items 6. 박스 설계 7. box의 부모-자식 관계 8. flex-wrap

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

https://www.w3schools.com/css/css3_flexbox.asp

CSS 프로그래밍 기초

CSS에서 박스요소들을 배치하기 위한 flexbox, 화면크기에 따라 최적의 레이아웃을 제공하기 위한 반응형웹, 다양한 웹폰트와 아이콘등의 사용법을 배웁니다.

https://dinfree.com/lecture/frontend/122_css_5.html#m1

1. Flex

display 속성 중 하나

display : flex 로 설정

2. Flexbox

아래의 예시 사진에 있는 파란색 영역

div 박스를 flexbox로 바꾸면 안에 있는 item이 모두 inline으로 바뀐다.

height도 지정 가능하기 때문에 정확하게는 inline-block로 바뀐다.

너비는 block

height를 지정하면 내부의 item도 같이 높이가 변경됨

3. flex-direction

column : 열이 쌓이는 방향 (가로로 길어짐)

row : 행이 쌓이는 방향 (세로로 길어짐)

default는 row (행)

가로로 길어지는 순간 세로쪽이 block이 됨

4. justify-content

정렬은 left, right가 있을 수 없고 start, end로 지정한다. → 따라서 축이 중요

main 축을 기준으로 item을 수평 정렬

start : 축 기준 시작 부분에 정렬

end : 축 기준 끝 부분에 정렬

center : 축 기준 가운데 정렬

space-around : 시작과 끝 item에 여백을 주고 item들 사이에는 spacer을 준다.

space-between : 각 item 사이에만 spacer을 준다.(첫번째와 마지막 item의 양끝에는 X)

space-evenly : 모든 공간에 spacer를 준다.


<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        div{
            border: 1px solid black;
            padding: 10px;
        }

        .f-box{
            display: flex;
            justify-content: end;
        }

        .f-box2{
            display: flex;
            flex-direction : column;
            height: 500px;
            justify-content: center;
        }

        .f-box3{
            display: flex;
            justify-content:space-around;

        }
    </style>
</head>
<body>
    <div class="f-box3">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
    <div class="f-box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
    <div class="f-box2">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
    
</body>
</html>

5. align-items

세로축

항상 세로축은 아님

반대축 cross axias 정렬 (↔ justifu-content : main axis 정렬)

default는 stretch

stretch : cross 방향으로 stretch 되어있음

start : cross 방향으로 시작 부분에 위치

end : cross 방향으로 끝 부분에 위치

center : cross 방향 기준으로 가운데 위치

위 : justify-content 값 / 아래 : align-items 값


<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        div{
            border: 1px solid black;
            padding: 10px;
        }

        .f-box{
            display: flex;
            /*justify-content 방향 = 가로축 / 메인축 정렬 */
            justify-content: space-between;
            height: 500px;
            /*세로축 but 항상 세로축은 아님 / 반대축 cross axis 정렬 */
            align-items: center;
        }

    </style>
</head>
<body>
    <div class="f-box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
</body>
</html>

6. 박스 설계


<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        div{
            border: 1px solid black;
            padding: 10px;
        }

        .f-outer-box{
            display: flex;
            justify-content: space-between;
        }
        .f-inner-left-box{
            display: flex;
        }
        .f-inner-right-box{
            display: flex;
        }
    </style>
</head>
<body>
    <div class="f-outer-box">
        <div class = "f-inner-left-box">
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </div>
        <div class = "f-inner-right-box">
            <div>4</div>
            <div>5</div>
        </div>
    </div>
</body>
</html>

7. box의 부모-자식 관계

모든 배치는 부모에게 준다!

div : body에 있는 모든 div 디자인한다.

.f-box div : f-box 안의 모든 div만 디자인한다.

.f-box > div : f-box 바로 밑에 있는 div만 디자인한다. <div class="f-box"> 안에 <div> 안에 <div>는 디자인 하지 않는다. (ex. “자식” 부분O, “자손” 부분 X)


<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        /*body에 있는 모든 div 디자인한다.*/
        div{
            border: 1px solid black;
            padding: 10px;
        }

        .f-box{
            display: flex;
            flex-wrap: wrap;
        }

        /*f-box 안의 모든 div만 디자인한다.*/
        .f-box div{
            
        }
        /*f-box 바로 밑에 있는 div만 디자인한다.
        <div class="f-box"> 안에 <div> 안에 <div>는 디자인 하지 않는다*/
        .f-box > div{
            height: 100px;
            width: 100px;
        }
    </style>
</head>
<body>
    <div class="f-box">
        <div>
		        자식
		        <div>
				        자손?
		        </div>
        </div>
    </div>
</body>
</html>

8. flex-wrap

wrap : 화면의 크기를 줄일 경우 비율이 깨지지 않고 유지한 채로 줄어든다

default는 nowrap

flex-shrink : 비율이 깨짐 (default가 shrink 상태이므로 사용X → nowrap과 wrap으로 해결)


<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        /*body에 있는 모든 div 디자인한다.*/
        div{
            border: 1px solid black;
            padding: 10px;
        }

        .f-box{
            display: flex;
            flex-wrap: wrap;
        }

        /*f-box 안의 모든 div만 디자인한다.*/
        .f-box div{
            
        }
        /*f-box 바로 밑에 있는 div만 디자인한다.
        <div class="f-box"> 안에 <div> 안에 <div>는 디자인 하지 않는다*/
        .f-box > div{
            height: 100px;
            width: 100px;
        }
    </style>
</head>
<body>
    <div class="f-box">
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
    </div>
</body>
</html>

nowrap으로 설정한 경우

wrap으로 설정한 경우

<!DOCTYPE html> <html lang="en"> <head> <style> div{ border: 1px solid black; padding: 10px; } .f-box{ display: flex; justify-content: end; } .f-box2{ display: flex; flex-direction : column; height: 500px; justify-content: center; } .f-box3{ display: flex; justify-content:space-around; } </style> </head> <body> <div class="f-box3"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> <div class="f-box"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> <div class="f-box2"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> </body> </html>

<!DOCTYPE html> <html lang="en"> <head> <style> div{ border: 1px solid black; padding: 10px; } .f-box{ display: flex; /*justify-content 방향 = 가로축 / 메인축 정렬 */ justify-content: space-between; height: 500px; /*세로축 but 항상 세로축은 아님 / 반대축 cross axis 정렬 */ align-items: center; } </style> </head> <body> <div class="f-box"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> </body> </html>

<!DOCTYPE html> <html lang="en"> <head> <style> div{ border: 1px solid black; padding: 10px; } .f-outer-box{ display: flex; justify-content: space-between; } .f-inner-left-box{ display: flex; } .f-inner-right-box{ display: flex; } </style> </head> <body> <div class="f-outer-box"> <div class = "f-inner-left-box"> <div>1</div> <div>2</div> <div>3</div> </div> <div class = "f-inner-right-box"> <div>4</div> <div>5</div> </div> </div> </body> </html>

<!DOCTYPE html> <html lang="en"> <head> <style> /*body에 있는 모든 div 디자인한다.*/ div{ border: 1px solid black; padding: 10px; } .f-box{ display: flex; flex-wrap: wrap; } /*f-box 안의 모든 div만 디자인한다.*/ .f-box div{ } /*f-box 바로 밑에 있는 div만 디자인한다. <div class="f-box"> 안에 <div> 안에 <div>는 디자인 하지 않는다*/ .f-box > div{ height: 100px; width: 100px; } </style> </head> <body> <div class="f-box"> <div> 자식 <div> 자손? </div> </div> </div> </body> </html>

<!DOCTYPE html> <html lang="en"> <head> <style> /*body에 있는 모든 div 디자인한다.*/ div{ border: 1px solid black; padding: 10px; } .f-box{ display: flex; flex-wrap: wrap; } /*f-box 안의 모든 div만 디자인한다.*/ .f-box div{ } /*f-box 바로 밑에 있는 div만 디자인한다. <div class="f-box"> 안에 <div> 안에 <div>는 디자인 하지 않는다*/ .f-box > div{ height: 100px; width: 100px; } </style> </head> <body> <div class="f-box"> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> </div> </body> </html>