[HTML] Flex 문법

728x90

Flex 문법 관련 참고 블로그

https://heropy.blog/2018/11/24/css-flexible-box/

CSS Flex(Flexible Box) 완벽 가이드

많은 경우 float, inline-block, table 등의 도움을 받아서 수평 레이아웃을 구성하지만 이는 차선책이며, 우리는 Flex(Flexible Box)라는 명확한 개념(속성들)으로 레이아웃을 쉽게 구성할 수 있습니다. CSS F

heropy.blog

layout 구성
1. display
2. float
3. position
4. flex (신규문법)

Flex

부모 box(container)에 flex 선언하고, 안에 있는 박스(item) 요소를 유연하게 배치하는 속성
flex는 flex만 이용 (부분 부분 잡아서 처리 가능)
flex + float 섞는 것은 X
container(부모) - item(자식) 각자 적용하는 속성이 다름 (암기)

container (부모 박스)

item의 너비 만큼 가로배치

display

Container 정의, flex 박스 선언
부모 박스를 어떻게 배치할 것인가?
무조건 들어가야하는 문법
flex: block
inline-flex: inline
flex는 height를 주지 않으면 부모컨텐츠의 높이를 따라가게(부모컨텐츠에 딱 맞게) 되어 있음 ▶ align-items; 확인

<style>
	.container {
    	display: flex;
        flex-direction: row;
    }
</style>

<div class="container box"><!-- 부모 -->
     <div class="item">hello</div><!-- 자식 -->
     <div class="item">hello</div>
     <div class="item">hello</div>
</div>

(왼)부모 box가 block으로 나감 (오)부모 box가 inline으로 나감

flex-flow

flex-direction + flex-wrap 한번에 정의

flex-direction

주 축(main-axis) 설정: 가로 or 세로
교차축(cross-axis), 반대축은 주축에 따라 자동으로 설정됨
그래서 주축이 뭔지가 중요!

값	의미
row (default)	아이템들의 배치구도: 가로 / 주축: 가로
row-reverse	아이템들의 배치구도: 반대축 / 주축: 가로
column	아이템들의 배치구도: 세로 / 주축: 세로
column-reverse	아이템들의 배치구도: 반대축 / 주축: 세로

flex-wrap

items의 여러 줄 묶음(줄바꿈) 설정
컨텐츠 넘어갈 때: 줄 바꿈 or 안 바꿈

값	의미
nowrap (default)	한 줄에 표시 (여러 줄로 묶지 않음) = 값이 튀어나감
wrap	공간이 없으면 줄바꿈 (여러 줄로 묶음)
wrap-reverse	wrap의 역 방향으로 여러 줄로 묶음

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<body>
    
    <h3>유연한 Box flex</h3>

    <style>
        .box {background-color: rgb(250, 238, 223); padding: 10px;}
        .box .item{background-color: rgb(127, 225, 255); width: 50px; height: 50px;}

        .container {
            /* flex 기본 item의 너비 만큼 가로배치 */
            /* flex - 블럭배치, inline-flex - 인라인배치 */
            display: flex;
            /* 주축 설정 row 기본값 */
            /* 세로 - column */
            flex-direction: row;
        }
    </style>

    <div class="container box"><!-- 부모 -->
        <div class="item">hello</div><!-- 자식 -->
        <div class="item">hello</div>
        <div class="item">hello</div>
    </div>

    <!-- <div class="container box">
        <div class="item">hello</div>
        <div class="item">hello</div>
        <div class="item">hello</div>
    </div> -->

    <hr>

    <style>
        .box {background-color: rgb(250, 238, 223); padding: 10px;}
        .box .item{background-color: rgb(127, 225, 255); width: 50px; height: 50px; margin: 10px;}

        .container2 {
            display: flex;
            flex-flow: row wrap;
            /* flex-direction: row;
            flex-wrap: wrap; */
            /* 더 이상 공간이 없을 때 줄바꿈 처리 */
        }
    </style>
    
    <h3>flex-wrap (줄바꿈)</h3>
    
    <div class="container2 box"><!-- 부모 -->
        <div class="item">hello</div><!-- 자식 -->
        <div class="item">hello</div>
        <div class="item">hello</div>
        <div class="item">hello</div>
        <div class="item">hello</div>
        <div class="item">hello</div>
    </div>

</body>
</html>

justify-content

주 축(main-axis)의 정렬 방법 (items를~)
주 축: 가로, 가로에 대한 정렬 방법
주 축; 세로, 세로에 대한 정렬 방법

값	의미
flex-start	= left, 시작점으로 정렬
flex-end	끝점으로 정렬
center	가운데 정렬
space-between	시작 item은 시작점, 마지막 item은 끝점에 정렬, 나머지 items는 사이에 고르게 정렬
space-around	items를 균등한 여백을 포함하여 정렬
space-evenly	모든 사이 간격을 동등하게 (아래 그림)
space-around 와 space-evenly 차이점 알기

align- ~ 교차 축에서~

align-content (여러 줄)

교차 축(cross-axis)의 정렬 방법 설정 (여러줄)

값	의미
stretch (default)	교차 축을 채우기 위해 items를 늘림
flex-start	시작점으로 정렬
flex-end	끝점으로 정렬
center	가운데 정렬
space-between	시작 item은 시작점, 마지막 item은 끝점에 정렬, 나머지 items는 사이에 고르게 정렬
space-around	items를 균등한 여백을 포함하여 정렬

align-items (1줄)

교차 축(cross-axis)의 정렬 방법 설정 (1줄)

값	의미
stretch (default)	교차 축을 채우기 위해 items를 늘림
flex-start	시작점으로 정렬
flex-end	끝점으로 정렬
center	가운데 정렬
baseline	문자 기준선에 정렬

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    <h3>justify-content (주축정렬)</h3>

    <style>
        .box {background-color: rgb(250, 238, 223); padding: 10px; /* height: 500px; */}
        .box .item{background-color: rgb(127, 225, 255); width: 50px; height: 50px; margin: 10px;}

        .container {
            display: flex;
            /* flex-direction: column; 주축 세로 정렬*/
            /* 주축 정렬 */
            /* 사이 균등 */
            /* justify-content: space-around; */
            /* 양끝은 붙이고, 사이 균등 */
            /* justify-content: space-between; */
            /* 양끝과 아이템 사이 균등 */
            justify-content: space-evenly;
        }
    </style>

    <div class="container box"><!-- 부모 -->
        <div class="item">hello</div><!-- 자식 -->
        <div class="item">hello</div>
        <div class="item">hello</div>
        <div class="item">hello</div>
    </div>

    <hr>
    
    <h3>align-item(교차축 정렬 - 한줄일 때)</h3>

    <style>
        .box {background-color: rgb(250, 238, 223); padding: 10px; height: 500px;}
        .box .item2{background-color: rgb(127, 225, 255); width: 50px; margin: 10px; height: 50px;}

        .container2 {
            display: flex;
            /* 교차축 정렬 */
            /* align-items: stretch; 잡아당김 */ /* 이때는 height가 들어가면 안됨 */
            /* align-items: flex-start; 수직 위 */
            /* align-items: flex-end; 수직 아래 */
            /* align-items: center; 수직 중앙 */
            align-items: baseline; /* 가운데 문자 기준으로 상자 배치를 바꿔준다, 아이템의 문자들 기준으로 수직 정렬 */
        }
    </style>

    <div class="container2 box"><!-- 부모 -->
        <div class="item2" style="line-height: 50px;">hello</div><!-- 자식 -->
        <div class="item2" style="line-height: 70px;">hello</div>
        <div class="item2">hello</div>
        <div class="item2">hello</div>
    </div>

    <hr>

    <h3>align-content (교차축정렬 - 두줄 이상)</h3>

    <style>
        .box {background-color: rgb(250, 238, 223); padding: 10px; height: 500px; width: 300px;}
        .box .item3{background-color: rgb(127, 225, 255); width: 50px; margin: 10px; height: 50px;}

        .container3 {
            display: flex;
            flex-direction: row; /* column으로 바뀌면 축이 세로로 바뀜, 교차축은 가로가 됨 */
            flex-wrap: wrap; /* 컨텐츠가 가득 차면 2줄 이상으로 떨어짐, 교차축 정렬 - 두줄이상 */
            /* align-content: stretch; */ /* item 높이가 없어야 함 */
            /* align-content: flex-start; */
            /* align-content: flex-end; */
            /* align-content: center; */
            /* align-content: space-around; */
            align-content: space-between;
        }
    </style>
    
    <div class="container3 box">
        <div class="item3">1</div>
        <div class="item3">2</div>
        <div class="item3">3</div>
        <div class="item3">4</div>
        <div class="item3">5</div>
        <div class="item3">6</div>
        <div class="item3">7</div>
        <div class="item3">8</div>
        <div class="item3">9</div>
        <div class="item3">10</div>
    </div>
    
</body>
</html>

item (자식 박스)

flex

flex-grow, flex-shrink, flex-basis 한번에 정의

flex-grow

item의 증가 너비 비율 설정
부모에 따라 넓어지는 비율에 대한 설정

1. grow가 들어가면
2. 상자의 비율이 들어가고
ex) width: 50px; grow: 0;이면 상자가 50px에 고정
3. 커지는 비율이 grow에 따라서 달라짐

flex-shrink (↔grow)

item의 감소 너비 비율 설정
부모에 따라 감소되는 비율에 대한 설정

flex-basis [중요]

item의 (공간 배분 전) 기본 너비 설정 = 고정너비
width로 대체 가능
box 지정해주는 크기라고 보면 됨
기본값이 auto인 경우(flex box의 기본너비) width, height 등의 속성으로 대체 가능

align-self

따로 떼서 원하는 위치로 보내기 가능 (많이 사용x) = 개별 item 정렬 방법
교차 축에서 item의 정렬 방법을 설정

order

참고 사항
item의 순서 결정
기본값 0 기준 +면 오른쪽, -면 왼쪽에 위치

// flex: 증가너비 감소너비 기본너비;

.item {
	flex: 1 1 20px /* 증가너비 감소너비 기본너비*/
    flex: 1 1 /* 증가너비 감소너비 */
    flex: 1 20px /* 증가너비 기본너비 (단위를 사용하면 flex-basis가 적용됨) */
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .box {background-color: rgb(250, 238, 223); padding: 10px; height: 500px;}
        .box .item{background-color: rgb(127, 225, 255); width: 50px; height: 50px; margin: 10px;}

        .container {
            display: flex;
        }

        /* grow, shrink 컨테이너 사이즈가 변할 때, 아이템이 증가되거나 감소되는 비율(속도) */
        /* basis 아이템 너비에 대한 비율 (기본값은 auto이며, 없으면 width 따라갑니다.) */
        .item1 {
            /* flex-grow: 2;
            flex-shrink: 2; */
            /* flex-basis: 33.3333%; */ /* 너비를 직접 지정한다고 생각하면 됨 */
            flex: 2 2 33.3333%;
            order: 10;
        }
        .item2 {
            /* flex-grow: 1;
            flex-shrink: 1; */
            /* flex-basis: 33.3333%; */
            flex: 1 1 33.3333%;
            order: 1;
        }
        .item3 {
            /* flex-grow: 0;
            flex-shrink: 0; */
            /* flex-basis: 33.3333%; */
            flex: 0 0 33.3333%;
            order: 5;

            align-self: center; /* 아이템 하나만 교차측 정렬 */
        }
    </style>

</head>
<body>

    <h3>item에 적용하는 속성들</h3>
    
    <div class="container box">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
    </div>

</body>
</html>

오늘 하루

기억에 남는 부분

어려운 부분

문제 해결 부분