CSS์ ๐flex ์์ฑ์ ๋ํด ๋ง์คํฐํ์
Flex
๋ฅผ ์ ๋ฐฐ์์ผํ์ฅฌ๐โโ๏ธ?A.
Flex
๋ ๋ ์ด์์์ ์์์ด๊ธฐ ๋๋ฌธ์ด๋ค.๐โโ๏ธ
-
semantic ํ๊ทธ
๋ก ์ด๋ฃจ์ด์ง ์ ์ด๋ฏธ์ง๋ฅผ ๋ฌธ์์ ๊ตฌ์กฐ๋ผ๋ html์ ์๊ฐ๋ณด๋จ
์ด๋ฌํ ํํ๋ฅผ ์ด๋ป๊ฒ CSS๋ก ๊ตฌํํ ์ง์ ๊ด์ ์์ ์๊ฐํด๋ด์ผํ๋ค.
flex
๋ฅผ ์ฌ์ฉํ๋ค.flex
๊ฐ ์ฌ์ฉ๋๋ค.flex
๋ฅผ ์ฌ์ฉํ๋ค.
๋ฉ์ธ ์ถ(main axis)
: ์์ดํ ๋ค์ด ๋ฐฐ์น๋ ๋ฐฉํฅ์ ์ถ = (์ค๋ ๊ผฌ์น๐ข๋ผ๊ณ ์๊ฐํ์)
main start|main-end: ๋ฉ์ธ ์ถ์ ์์์ ๊ณผ ๋์
main size: ๋ฉ์ธ ์ถ์ ์ ์ฒด ํฌ๊ธฐ
์์ง ์ถ(cross axis)
: ๋ฉ์ธ ์ถ๊ณผ ์์ง์ธ ์ถ
cross size: ์์ง ์ถ์ ์ ์ฒด ํฌ๊ธฐ
=> ์ค๋ ๐ข๋ค(flex items)์ด ๊ผฌ์น(๋ฉ์ธ ์ถ)๋ฅผ ๋ฐ๋ผ ์ญ ๊ฝํ์ ์ ๋ ฌ๋ ์ํ๋ผ๊ณ ์์ํ์
=>
Flex ์์ฑ์ ํฌ๊ฒ 2๊ฐ์ง
๋ก ๋๋ ์ง๋ค.
-1.์ฝํ ์ด๋(๋ถ๋ชจ์์)์ ์ ์ฉ๋๋ ์์ฑ
-2.์์ดํ (์์์์)์ ์ ์ฉ๋๋ ์์ฑ
Flex ์ปจํ
์ด๋์ ์ ์ฉ๋๋ ์์ฑ
display:flex
- Flex ์ปจํ ์ด๋์
display:flex
๋ฅผ ์ ์ฉํ๋ ๊ฒ์ ์์์ผ๋ก Flex ์์ดํ ๋ค์ด ๊ฐ๋ก ๋ฐฉํฅ์ผ๋ก ๋ฐฐ์น๋๋ค.- ๋ฐฐ์น๋๋ฉฐ ์์ดํ ์ด ๊ฐ์ง ์ฝํ ์ธ ์ ๊ฐ๋ก ํฌ๊ธฐ๋งํผ๋ง ์ฐจ์งํ๊ฒ๋๊ณ (๋ง์น inline ์์์ฒ๋ผ) ์ธ๋ก๋ ์ปจํ ์ด๋์ ๋์ด ๋งํผ ๋์ด๋๋ค.
์ฐธ๊ณ ๐ก>inline-flex
๋ ์ปจํ ์ด๋๊ฐ ์ฃผ๋ณ ์์๋ค๊ณผ ์ด๋ป๊ฒ ์ด์ฐ๋ฌ์ง์ง ๊ฒฐ์ ํ๋ ๊ฐ์ผ๋ก inline block์ฒ๋ผ ๋์ํ๋ค.
flex direction
(๋ฐฐ์น ๋ฐฉํฅ ์ค์ )
- ์์ดํ ๋ค์ด ๋ฐฐ์น๋๋ ์ถ์ ๋ฐฉํฅ์ ๊ฒฐ์ ํ๋ ์์ฑ์ด๋ค.
- ์์ฑ ๊ฐ๋ค :
row
, ๊ธฐ๋ณธ๊ฐ์ผ๋ก ํ ๋ฐฉํฅ ๋ฐฐ์น
row-reverse
, ์์ดํ ๋ค ์ญ์์ผ๋ก ํ ๋ฐฐ์น
column
, ์์ดํ ๋ค์ด ์ด ๋ฐฉํฅ์ผ๋ก ๋ฐฐ์น.
column-reverse
, ์์ดํ ๋ค์ด ์ญ์์ผ๋ก ์ธ๋ก ๋ฐฐ์น ๋ฉ๋๋ค.- TIP๐)๋ฐ์ํ ๊ตฌํ์
flex-directon
์์ฑ์ ์ฌ์ฉํด ๊ธฐ๋ณธ๊ฐ์ธrow
์์ ์์ ๋ชจ๋ฐ์ผ ๊ธฐ๊ธฐ ์ ๋์ ํญ์ผ๋ก ๋ฐ๋๊ฒ ๋๋ฉด ์์ฑ๊ฐ์column
์ผ๋ก ๋ฐ๊พธ์ด ๋ง์น ๋ฉ๋ด Bar๊ฐ ์๋๋ก ๋ด๋ ค์ค๋ ๋๋์ ๋ฐ์ํ ๋ ์ด์์ ๊ตฌํํ ์๋!
flex-wrap
(์ค๋๊น ์ฒ๋ฆฌ ์ค์ )
- ์ปจํ ์ด๋๊ฐ ์์ดํ ๋ค์ ๋ด์ ์ฌ์ ๊ณต๊ฐ์ด ์์๋ ์ค๋ฐ๊ฟ์ ์ด๋ป๊ฒ ํ ์ง ๊ฒฐ์ ํ๋ ์์ฑ
nowrap
, ๊ธฐ๋ณธ๊ฐ์ผ๋ก ์ค๋ฐ๊ฟ X ๋์น๋ฉด ์์ดํ ์ด ๋น ์ ธ๋๊ฐ๋ค.
wrap
, ์ค๋ฐ๊ฟ์ํ๊ณ float์ด๋ inline-block์ผ๋ก ๋ฐฐ์นํ ์์์ ์ ์ฌํ๊ฒ ๋์
wrap-reverse
, ์์ดํ ๋ค์ ์ญ์์ผ๋ก ์ค๋ฐ๊ฟ
flex-flow
flex-direction๊ณผ flex-wrap
์ ํ๊บผ๋ฒ์ ์ง์ ํ ์ ์๋ ๋จ์ถ ์์ฑ- flex-direction, flex-wrap์ ์์ผ๋ก ์์ฑ EX>
.container{flex-flow: row wrap};
์ ๋ ฌ
๊ณผ ๊ด๋ จ๋ ์์ฑ 1>
justify-content
๋ ๋ฉ์ธ์ถ(์ค๋
๊ผฌ์น) ๋ฐฉํฅ์ผ๋ก ์ ๋ ฌ
2>align-items
์ ์์ง์ถ(์ค๋
์ ๋ฏ์ด๋ด๋) ๋ฐฉํฅ์ผ๋ก ์ ๋ ฌ
justify-content
(๋ฉ์ธ์ถ ๋ฐฉํฅ ์ ๋ ฌ)
justify
๋ ๋ฉ์ธ์ถ ๋ฐฉํฅ์ผ๋ก ์์ดํ ์๋ค ์ ๋ ฌํ๋ ์์ฑ์ด๋ค
flex-start
(๊ธฐ๋ณธ๊ฐ), ์์ดํ ๋ค์ ์์์ ์ผ๋ก ์ ๋ ฌํ๋๋ฐ flex-direction์ด row(๊ฐ๋ก ๋ฐฐ์น)์ผ ๋๋ ์ผ์ชฝ, column(์ธ๋ก ๋ฐฐ์น)์ผ ๋๋ ์๊ฐ ์์์
flex-end
, ์์ดํ ๋ค์ ๋์ ์ผ๋ก ์ ๋ ฌํ๋๋ฐ
flex-direction์ด row(๊ฐ๋ก ๋ฐฐ์น)์ผ ๋๋ ์ค๋ฅธ์ชฝ, column(์ธ๋ก ๋ฐฐ์น)์ผ ๋๋ ์๋๊ฐ ๋์
center
, ์์ดํ ๋ค์ ๊ฐ์ด๋ฐ๋ก ์ ๋ ฌ
space-between
, ์์ดํ ๋ค์ โ์ฌ์ด(between)โ์ ๊ท ์ผํ ๊ฐ๊ฒฉ์ ๋ง๋ค์ด ์ค์ผ๋ก์ ์์ชฝ ์์ดํ ์ ์์์ ๊ณผ ๋์ ์ ๋ถ๋๋ค
space-around
, ์์ดํ ๋ค์ โ๋๋ (around)โ์ ๊ท ์ผํ ๊ฐ๊ฒฉ์ ๋ง๋ค์ด ์ค
space-evenly
, ์์ดํ ๋ค์ ์ฌ์ด, ์ ๋๊น์ง ๋ชจ๋ ๊ท ์ผํ ๊ฐ๊ฒฉ์ ๋ง๋ค์ด ์ค
align-items
(์์ง์ถ ๋ฐฉํฅ ์ ๋ ฌ)
align-items
๋ ์์ง์ถ ๋ฐฉํฅ์ผ๋ก ์์ดํ ์ ์ ๋ ฌํ๋ ์์ฑ์ผ๋ก justify-content์ ์์ง ๋ฐฉํฅ์ ์ ๋ ฌ์ด๋ค.
stretch
(๊ธฐ๋ณธ๊ฐ), ์์ดํ ๋ค์ด ์์ง์ถ ๋ฐฉํฅ์ผ๋ก ๋๊น์ง ๋์ด๋จ
flex-start
, ์์ดํ ๋ค์ ์์์ ์ผ๋ก ์ ๋ ฌํด
flex-direction์ด row(๊ฐ๋ก ๋ฐฐ์น)์ผ ๋๋ ์, column(์ธ๋ก ๋ฐฐ์น)์ผ ๋๋ ์ผ์ชฝ์ด ์์์
flex-end
, ์์ดํ ๋ค์ ๋์ผ๋ก ์ ๋ ฌํด
flex-direction์ด row(๊ฐ๋ก ๋ฐฐ์น)์ผ ๋๋ ์๋, column(์ธ๋ก ๋ฐฐ์น)์ผ ๋๋ ์ค๋ฅธ์ชฝ์ด ๋์
center
, ์์ดํ ๋ค์ ๊ฐ์ด๋ฐ๋ก ์ ๋ ฌ
baseline
, ์์ดํ ๋ค์ ํ ์คํธ ๋ฒ ์ด์ค๋ผ์ธ ๊ธฐ์ค์ผ๋ก ์ ๋ ฌ
TIP๐ก)justify-content: center;
,
align-item: center;
๋ฅผ ์ฃผ๋ฉด ๋ถ๋ชจ ์์ ์์ ์๋ ์์ดํ ์ ํ ๊ฐ์ด๋ฐ ๋ฐฐ์น๊ฐ๋ฅ!!
align-content
(์ฌ๋ฌ ํ ์ ๋ ฌ)
flex-wrap: wrap;
์ด ์ค์ ๋ ์ํ์์, ์์ดํ ๋ค์ ํ์ด 2์ค ์ด์ ๋์์ ๋์ ์์ง์ถ ๋ฐฉํฅ ์ ๋ ฌ์ ๊ฒฐ์ ํ๋ ์์ฑ
justify-content
์ ์์ฑ๊ฐ๊ณผ ๋์ผ
flex-basis
(์ ์ฐํ ๋ฐ์ค์ ๊ธฐ๋ณธ ์์ญ)
flex-basis
๋ Flex ์์ดํ ์ ๊ธฐ๋ณธ ํฌ๊ธฐ๋ฅผ ์ค์ (flex-direction์ด row์ผ ๋๋ ๋๋น, column์ผ ๋๋ ๋์ด)
flex-basis
์ ๊ฐ์ผ๋ก width, height ๋ฑ์ ๊ฐ์ข ๋จ์์ ์๊ฐ ๋ค์ด๊ฐ๋ฉฐ, ๊ธฐ๋ณธ๊ฐ์ auto๋ก ํด๋น ์์ดํ ์ width ๊ฐ์ผ๋ก width๋ฅผ ๋ฐ๋ก ์ค์ ํ์ง ์์ผ๋ฉด ์ปจํ ์ธ ์ ํฌ๊ธฐ์ด๋ค.flex-basis
๋ฅผ ํตํด ์์ดํ ์ ๊ธฐ๋ณธ ์ ์ ํฌ๊ธฐ๋ฅผ ์ค์ .
flex-grow
(์ ์ฐํ๊ฒ ๋๋ฆฌ๊ธฐ)
flex-grow
๋ ์์ดํ ์ดflex-basis
์ ๊ฐ๋ณด๋ค ์ปค์ง ์ ์๋์ง๋ฅผ ๊ฒฐ์ ํ๋ ์์ฑ
flex-grow
์๋ ์ซ์๊ฐ์ด ๋ค์ด๊ฐ๊ณ 0๋ณด๋ค ํฐ ๊ฐ์ด ์ธํ ์ด ๋๋ฉด ํด๋น ์์ดํ ์ด ์ ์ฐํ(Flexible) ๋ฐ์ค๋ก ๋ณํ๊ณ ์๋์ ํฌ๊ธฐ๋ณด๋ค ์ปค์ง๋ฉฐ ๋น ๊ณต๊ฐ์ ๋ฉ์.flex-grow
์ ๋ค์ด๊ฐ๋ ์ซ์์ ์๋ฏธ๋, ์์ดํ ๋ค์flex-basis
๋ฅผ ์ ์ธํ ์ฌ๋ฐฑ(๋น ๊ณต๊ฐ) ๋ถ๋ถ์flex-grow
์ ์ง์ ๋ ์ซ์์ ๋น์จ๋ก ๋๋์ด ๊ฐ์ง์ ์๋ฏธํ๋ค.- ๊ธฐ๋ณธ๊ฐ์ด 0์ด๊ธฐ ๋๋ฌธ์, ๋ฐ๋ก ์ ์ฉํ๊ธฐ ์ ๊น์ง๋ ์์ดํ ์ด ๋์ด๋์ง ์์๋ค.
flex-shrink
(์ ์ฐํ๊ฒ ์ค์ด๊ธฐ)
flex-shrink
๋flex-grow
์ ์์ ์ด๋ฃจ๋ ์์ฑ์ผ๋ก, ์์ดํ ์ดflex-basis
์ ๊ฐ๋ณด๋ค ์์์ง ์ ์๋์ง๋ฅผ ๊ฒฐ์ ํ๋ ์์ฑ.
flex-shrink
์๋ ์ญ์ ์ซ์๊ฐ์ด ๋ค์ด๊ฐ๊ณ ๋ช์ด๋ ์ผ๋จ 0๋ณด๋ค ํฐ ๊ฐ์ด ์ธํ ๋๋ฉด ํด๋น ์์ดํ ์ด ์ ์ฐํ(Flexible) ๋ฐ์ค๋ก ๋ณํ๊ณ flex-basis๋ณด๋ค ์์์ง๋ค.- ๊ธฐ๋ณธ๊ฐ์ด 1์ด๊ธฐ ๋๋ฌธ์ ์ธํ ํ์ง ์์๋ ์์ดํ ์ด
flex-basis
๋ณด๋ค ์์์ง ์ ์์๋ค.flex-shrink
๋ฅผ 0์ผ๋ก ์ธํ ํ๋ฉด ์์ดํ ์ ํฌ๊ธฐ๊ฐflex-basis
๋ณด๋ค ์์์ง์ง ์๊ธฐ ๋๋ฌธ์ ๊ณ ์ ํฌ๊ธฐ๋ฅผ width๋ก ์ค์ ํ๋ฉด ๊ณ ์ ํญ์ ์ปฌ๋ผ์ ๋ง๋ ๋ค.
-์ปจํ ์ด๋์ ๊ณ ์ ํฌ๊ธฐ๊ฐ width 100%์ผ ๋
-์ปจํ ์ด๋์ ๊ณ ์ ํฌ๊ธฐ๊ฐ width 250px์ผ ๋
flex-shrink
๊ฐ์ด 0์ธ ์์ดํ ์ ํฌ๊ธฐ๋ ์ค์ด๋ค์ง ์๋๋ค.
flex-grow
,flex-shrink
,flex-basis
๋ฅผ ํ ๋ฒ์ ์ธ ์ ์๋ ์ถ์ฝํ ์์ฑ์ด๋ค.
- ์ธ ์์ฑ๋ค์ ์๋ก ๊ด๋ จ์ด ๊น๊ธฐ ๋๋ฌธ์, ์ด ์ถ์ฝํ์ ์ฐ๋ ํธ์ด ์ฌ๋ฌ๋ชจ๋ก ํธ๋ฆฌํ๋ค.
- ์ฃผ์ํ ์ ๐)
flex: 1;
์ฒ๋ผflex-basis
๋ฅผ ์๋ตํด์ ์ฐ๋ฉดflex-basis
์ ๊ฐ์ 0์ด ๋ผ๋ ์ ์ ์ฃผ์!<style> .item { flex: 1; /* flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */ flex: 1 1 auto; /* flex-grow: 1; flex-shrink: 1; flex-basis: auto; */ flex: 1 500px; /* flex-grow: 1; flex-shrink: 1; flex-basis: 500px; */ } </style>
flex-basis: 0;
์ผ๋ก, ๊ธฐ๋ณธ ์ ์ ํฌ๊ธฐ๋ฅผ 0์ผ๋ก ๋ง๋ค๋ฉด ๊ฒฐ๊ตญ ์ ์ฒด ํฌ๊ธฐ๋ฅผflex-grow์ flex-shrink
๋ก ์ค์ ํ ๋น์จ๋ก ๋๋์ด ๊ฐ์ ธ ์์ญ ์์ฒด์ ํฌ๊ธฐ๋ฅผ ์ค์ ํ ๋น์จ๋ก ์ค์ ํ ์ ์๋ค.<style> .item { flex: 1 1 0; // ์ ์ฒด ์์ดํ ์ ์ฌ๋ฐฑ ๋น์จ 1 } .item:nth-child(2) { flex: 2 1 0; // 2๋ฒ์งธ ์์ดํ ์ ์ฌ๋ฐฑ ๋น์จ๋ง 2 } </style>
- ์ฌ๋ฐฑ์ ๋น๊ฐ ์๋, ์์ญ ์์ฒด๋ฅผ ์ํ๋ ๋น์จ๋ก ๋ถํ ํ๋ค๋ฉด flex-basis์ 0์ผ๋ก ํ์ฌ ์ฒ๋ฆฌํ ์ ์๋ค.
flex-wrap
๊ณผflex-basis
๋ฅผ ์ด์ฉํด์ N๋จ ์ปฌ๋ผ์ ์ฌ๊ฐํ ๋ชฉ๋ก์ ๋ง๋ค ์๋ ์๋ค.<style> .container { display: flex; flex-wrap: wrap; } </style>
-
.item {flex: 1 1 40%;}
, ์์ดํ ์flex-basis
ํฌ๊ธฐ๊ฐ 40%์ผ ๋ 100%์์ ์์ดํ ์ด 2๊ฐ ๋ค์ด๊ฐ 2๋จ ์ปฌ๋ผ ์์ฑ
.item {flex: 1 1 30%;}
, ์์ดํ ์flex-basis
ํฌ๊ธฐ๊ฐ 30%์ผ ๋ 100%์์ ์์ดํ ์ด 3๊ฐ ๋ค์ด๊ฐ 3๋จ ์ปฌ๋ผ ์์ฑ
align-self
(์์ง์ถ์ผ๋ก ์์ดํ
์ ๋ ฌ)
align-items
์ ์์ดํ ๋ฒ์ ์ผ๋กalign-items
๊ฐ ์ ์ฒด ์์ดํ ์ ์์ง์ถ ๋ฐฉํฅ ์ ๋ ฌ์ด๋ผ๋ฉด,align-self
๋ ํด๋น ์์ดํ ์ ์์ง์ถ ๋ฐฉํฅ ์ ๋ ฌ์ ์ค์ .
- ๊ธฐ๋ณธ๊ฐ์ auto๋ก, ๊ธฐ๋ณธ์ ์ผ๋ก align-items ์ค์ ์ ์์ ๋ฐ์ auto์ธ์ ๋๋จธ์ง ๊ฐ๋ค์ align-items์ ๋์ผํ๋ค.
- align-self๋ align-items๋ณด๋ค ์ฐ์ ๊ถ์ด ์์ด ์ ์ฒด ์ค์ ๋ณด๋ค ๊ฐ๊ฐ์ ๊ฐ๋ณ ์ค์ ์ด ์ฐ์ ์ํ๋ค.
order
(๋ฐฐ์น ์์)
- ๊ฐ ์์ดํ ๋ค์ ์๊ฐ์ ๋์ด ์์๋ฅผ ๊ฒฐ์ ํ๋ ์์ฑ์ผ๋ก ์ซ์๊ฐ์ด ๋ค์ด๊ฐ๋ฉฐ, ์์ ์ซ์์ผ ์๋ก ๋จผ์ ๋ฐฐ์น๋๋ค.
- ์๊ฐ์ ์ธ ์์์ผ ๋ฟ, HTML ์์ฒด์ ๊ตฌ์กฐ๋ฅผ ๋ฐ๊พธ๋ ๊ฒ์ ์๋๋ค. ๋ฐ๋ผ์ ์ ๊ทผ์ฑ ์ธก๋ฉด์์ ์ฌ์ฉ์ ์ฃผ์ํด์ผํ๋ค.
- ์ ๊ทผ์ฑ ์ธก๋ฉด ์ฃผ์ ๐) ์๊ฐ ์ฅ์ ์ธ๋ถ๋ค๊ป์ ์ฌ์ฉํ๋ ์คํฌ๋ฆฐ ๋ฆฌ๋๋ก ํ๋ฉด์ ์ฝ์ ๋, order๋ฅผ ์ด์ฉํด ์์๋ฅผ ๋ฐ๊พผ ๊ฒ์ ์๋ฏธ๊ฐ ์์์ ์ธ์ง!
z-index
๋ก Z์ถ ์ ๋ ฌํ๋ ์์ฑ์ผ๋ก ์ซ์๊ฐ ํด ์๋ก ์๋ก ์ฌ๋ผ์จ๋ค.z-index
๋ฅผ ์ค์ ์ํ๋ฉด 0์ผ๋ก 1๋ง ์ค์ ํด๋ ๋๋จธ์ง ์์ดํ ์ ๋ณด๋ค ์๋ก ์ฌ๋ผ์จ๋ค.
- ์น ํ์ด์ง์
๋ ์ด์์
์ ๋ง๋ค ๋display: flex
์์ฑ์ ์ฌ์ฉํ๋ค.justify-content
,align-item
์์ฑ์ ์ฌ์ฉํด๋ ์ด์์
์ ๊ตฌ์ฑํ๋ค.
- WeCode ๋ ธ์ ๋ ธํธ ๋ด์ฉ ์ค:}
- FLEX SITE - https://css-tricks.com/snippets/css/a-guide-to-flexbox/#basics-and-terminology
- 1๋ถ ์ฝ๋ฉ๋ - https://studiomeal.com/archives/197