Display - Flex

Jan 17, 2024

플렉스 정렬하면 div의 내용이 인라인 블락처럼 작용함


display: flex;

Grid는 몇 개씩 표현할지 정하는 코드가 필요해서 두 줄이 필요함

Flex하면 자식들이 다 Inline Block처럼 바껴서 일자로 정렬됨

Grid : 쇼핑몰같이 규칙적으로 배치가 될 때 사용함

여러줄 배치할때는 Grid

Flex : 한 줄을 정리할때

가운데 배치는 Grid보다 Flex가 좋음

부모가 Flex, 정렬을 justify-content / align items 사용함

💡

배치할 때 부모를 만들어야 나중에 무너지지 않음

1. 가운데 배치하기


<!DOCTYPE html>
<html>

<head>
    <style>
        .main {
            display: flex;
            justify-content: center;
        }

        .flex-container {
            width: 80%;
            display: flex;
            background-color: DodgerBlue;
        }

        .flex-container>div {
            background-color: #f1f1f1;
            margin: 10px;
            padding: 20px;
            font-size: 30px;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="flex-container">
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </div>
    </div>

</body>

</html>

2. 디폴트 값 : row


.flex-container {
            width: 80%;
            display: flex;
            flex-direction: row;
            background-color: DodgerBlue;
        }

3. 블락과 동일


.flex-container {
            width: 80%;
            display: flex;
            flex-direction: column;
            background-color: DodgerBlue;
        }

디폴트 값이 있음

컬럼 : 세로

로우 : 가로

justify-content : 동적인 정렬

바라보고 있는 축에 따라서 정렬이 달라짐

메인 액시아스(main axis) : 메인 축 정렬

모든 정렬이 지금 가고 있는 축을 기준으로 축 정렬을 함

4. 비율 맞출때

Flex 도 그리드처럼 Flex 의 숫자들의 합이 분모가 되고, 자신의 값이 분자가 됨


.flex-container>div {
            background-color: #f1f1f1;
            margin: 10px;
            padding: 20px;
            font-size: 30px;
            height: 50px;
            flex: 1;
        }

5. Responsive Flexbox : 화면을 줄였을때 흘러내려가게 하는 방법

조건보다 작으면 작용함

1) 미디어 쿼리(Media Query) : 반응형 브라우저 크기에 따라 반응함


@media (max-width: 800px) {
            .flex-container {
                flex-direction: column;
            }
        }

2) 부모가 %일때

자식에게 고정 크기

object-fit : contain 자기 비율에 맞게 들어감

fill 꽉 차게 들어감

cover 비율을 유지한 채로 겉이 짤림

3) 2wrap : 미디어 쿼리를 안써도 크기가 줄어들면 내려감

<사진의 크기를 고정으로 지정할 때>

200으로 지정하고 랩을 주면 비율이 안 깨지고 예쁘게 배열됨


<!DOCTYPE html>
<html>

<head>
    <style>
        .flex-container {
            display: flex;
            flex-wrap: wrap;
            font-size: 30px;
            text-align: center;
            background-color: yellow;
            padding: 10px;
            width: 70%;
        }

        .flex-item {
            background-color: #f1f1f1;
            padding: 10px;
            width: 300px;
            border: 1px solid black;
        }
    </style>
</head>

<body>

    <div class="flex-container">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
        <div class="flex-item">5</div>
    </div>

</body>

</html>

<!DOCTYPE html> <html> <head> <style> .main { display: flex; justify-content: center; } .flex-container { width: 80%; display: flex; background-color: DodgerBlue; } .flex-container>div { background-color: #f1f1f1; margin: 10px; padding: 20px; font-size: 30px; } </style> </head> <body> <div class="main"> <div class="flex-container"> <div>1</div> <div>2</div> <div>3</div> </div> </div> </body> </html>

<!DOCTYPE html> <html> <head> <style> .flex-container { display: flex; flex-wrap: wrap; font-size: 30px; text-align: center; background-color: yellow; padding: 10px; width: 70%; } .flex-item { background-color: #f1f1f1; padding: 10px; width: 300px; border: 1px solid black; } </style> </head> <body> <div class="flex-container"> <div class="flex-item">1</div> <div class="flex-item">2</div> <div class="flex-item">3</div> <div class="flex-item">4</div> <div class="flex-item">5</div> </div> </body> </html>