HTML, CSS

[CSS] Flex box

벼리01 2024. 8. 28. 12:05

πŸ“ŒFlex box

ν–‰κ³Ό μ—΄ ν˜•νƒœλ‘œ μžμ‹ μš”μ†Œλ₯Ό λ°°μΉ˜ν•˜λŠ” λ ˆμ΄μ•„μ›ƒ 속성. λΆ€λͺ¨ μš”μ†Œ 내뢀에 ν¬ν•¨λœ μžμ‹ μš”μ†Œλ“€μ„ μ„Έλ‘œ, κ°€λ‘œ 쀑심뢀에 μ •λ ¬ν•˜κ±°λ‚˜, μžμ‹ μš”μ†Œμ˜ λ„ˆλΉ„λ₯Ό λ™μΌν•˜κ²Œ μ„€μ •ν•  수 μžˆλ‹€.

 

πŸ“Œμ†μ„±

<body>
    <div class="wrap">
        <div class="parent">
            <div class="child"></div>
            <div class="child"></div>
            <div class="child"></div>
        </div>

    </div>
</body>
html, body{
    margin : 0;
    padding: 0;
}

.parent{
    width: 500px;
    height: 600px;
    background-color: pink;

    display: flex;
    flex-direction: column;
    align-items: center;
    
}

.child{
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    background-color: wheat;
}

 

 

초기 μƒνƒœ

 



 

 

 

flex-direction

μœ„μ™€ 같이 λΆ€λͺ¨ μš”μ†Œ 내에 μ—¬λŸ¬ μžμ‹ μš”μ†Œκ°€ μžˆμ„ λ•Œ, μŠ€νƒ€μΌμ— `display: flex` λ₯Ό μž‘μ„±ν•˜λ©΄ flex box둜 μš”μ†Œλ₯Ό λ‹€λ£° 수 μžˆλ‹€.

기본적으둜 μžμ‹ μš”μ†Œκ°€ κ°€λ‘œλ‘œ μ •λ ¬λœλ‹€.

`flex-direction` 을 μ—΄ λ˜λŠ” ν–‰ λ°©ν–₯으둜 μ„€μ •ν•  수 μžˆλ‹€. κΈ°λ³Έ 값은 `flex-direction: row`으둜 속성값을 μž‘μ„±ν•˜μ§€ μ•ŠμœΌλ©΄ μ—΄ λ°©ν–₯으둜 μ„€μ •λœλ‹€.

 

.parent{
    width: 500px;
    height: 600px;
    background-color: pink;
    display: flex;

}

 

flex-direction : row(default)
flex-direction: column;

 

 

 

 

align-items

ν˜„μž¬ flex-box의 λ°©ν–₯이 μ—΄(row)둜 λ˜μ–΄μžˆμœΌλ―€λ‘œ, `align-items: center` λ₯Ό μ μš©ν•˜λ©΄ 수직 μ •λ ¬ν•  수 μžˆλ‹€.

 

.parent{
    width: 500px;
    height: 600px;
    background-color: pink;

    display: flex;
    align-items: center;
    
}

 

align-items: center

 

 

 

 

 

ν˜„μž¬ λ°©ν–₯이 μ—΄(row)μ΄λ―€λ‘œ, `align-item : flex-end`λ₯Ό μ„€μ •ν•˜λ©΄ λΆ€λͺ¨ μš”μ†Œμ˜ κ°€μž₯ 끝단에 λ°°μΉ˜ν•  수 μžˆλ‹€.

기본값은 `flex-start` (상단 κ³ μ •)

.parent{
    width: 500px;
    height: 600px;
    background-color: pink;

    display: flex;
    align-items: flex-end;
}

 

 

align-item : flex-end

 

 

 

 

justify-content

ν˜„μž¬ flex-box λ°©ν–₯이 μ—΄(row)둜 λ˜μ–΄μžˆμœΌλ―€λ‘œ, `justify-content: center` λ₯Ό μ μš©ν•˜λ©΄ μˆ˜ν‰ μ •λ ¬ν•  수 μžˆλ‹€. 

 

.parent{
    width: 500px;
    height: 600px;
    background-color: pink;

    display: flex;
    justify-content: center;
}

 

row일 λ•Œ justify-content : center

 

 

 

 

ν˜„μž¬ λ°©ν–₯이 μ—΄(row)μ΄λ―€λ‘œ, `justify : flex-end`λ₯Ό μ„€μ •ν•˜λ©΄ λΆ€λͺ¨ μš”μ†Œμ˜ κ°€μž₯ 끝단에 λ°°μΉ˜ν•  수 μžˆλ‹€.

기본값은 `flex-start` (상단 κ³ μ •)

.parent{
    width: 500px;
    height: 600px;
    background-color: pink;

    display: flex;
    justify-content: flex-end;
}

 

justify : flex-end

 

 

 

 

ν˜„μž¬ λ°©ν–₯이 μ—΄(row)μ΄λ―€λ‘œ, `justify-content: space-around;`λ₯Ό μž‘μ„±ν•˜λ©΄ λΆ€λͺ¨ μš”μ†Œμ— 맞좰 쒌우 λ§ˆμ§„μ„ λ™μΌν•˜κ²Œ μ„€μ •ν•œλ‹€.

.parent{
    width: 500px;
    height: 600px;
    background-color: pink;

    display: flex;
    justify-content: space-around;
}

 

justify-content: space-around

 

 

 

 

 

ν˜„μž¬ λ°©ν–₯이 μ—΄(row)μ΄λ―€λ‘œ, `justify-content: space-between;`λ₯Ό μž‘μ„±ν•˜λ©΄ μš”μ†Œ μ‚¬μ΄μ˜ 쒌우 곡간을 λ™μΌν•˜κ²Œ λ°°μΉ˜ν•œλ‹€. 단, 맨 처음 μš”μ†Œμ™€ λ§ˆμ§€λ§‰ μš”μ†ŒλŠ” λ§ˆμ§„ 없이 λ”± 뢙인닀.

.parent{
    width: 500px;
    height: 600px;
    background-color: pink;

    display: flex;
    justify-content: space-between;
}

 

 

justify-content: space-between

 

 

 

 

 

 

 

ν˜„μž¬ λ°©ν–₯이 μ—΄(row)μ΄λ―€λ‘œ, `justify-content: space-around;` λ₯Ό μž‘μ„±ν•˜λ©΄ μš”μ†Œ μ‚¬μ΄μ˜ 곡간을 λ™μΌν•˜κ²Œ λ°°μΉ˜ν•œλ‹€. μ΄λ•Œ  `justify-content: space-between;`와 달리 맨 첫 μš”μ†Œμ™€ λ§ˆμ§€λ§‰ μš”μ†Œμ˜ 쒌우 여백도 λ™μΌν•œ κ³΅κ°„μœΌλ‘œ λ§žμΆ˜λ‹€.

.parent{
    width: 500px;
    height: 600px;
    background-color: pink;

    display: flex;
    justify-content: space-around;
}

 

justify-content: space-around;

 

 

'HTML, CSS' μΉ΄ν…Œκ³ λ¦¬μ˜ λ‹€λ₯Έ κΈ€

[HTML/CSS] 자주 μ“°λŠ” νƒœκ·Έ/μŠ€νƒ€μΌ  (0) 2024.10.17

κ΄€λ ¨κΈ€

ν‹°μŠ€ν† λ¦¬νˆ΄λ°”