[TIL] CSS Breakdown (FLEX๐ค)
What is FLEX??๐
์ฐ์ flex
๋ ์ ๋ ฌ๊ณผ ๊ด๋ จ๋, ๋ฐ์ค๋ค์ ๊ณต๊ฐ์ ๋๋๋ CSS ์์ฑ์ ์งํฉ์ด๋ค.
๋๋ ์ด๊ฑธ ํ๋ฆ์ ๋๋ก ์ดํดํ๊ณ ์๋ค.
(์ข์์ ์ฐ๋ก / ์ฐ์์ ์ข๋ก / ์์์ ์๋๋ก / ๋ฐ์์ ์๋ก) ํ๋ฅธ๋ค๐
์์ง๋ง์,
display: flex;
๋ ๋ถ.๋ชจ.์.๊ฒ. ์ ์ฉํ๋ค!!
/* ๋ถ๋ชจ์๊ฒ ์ ์ฉ์ ํด์ฃผ์ด์ผ ํฉ๋๋ค!!!!!! */
display: flex;
display: inline-flex; /*๋ถ๋ชจ๊ฐ ์์์ ์ปจํ
์ธ ๋งํผ๋ง ์๋ฆฌ๋ฅผ ์ฐจ์งํฉ๋๋ค*/
์ด๋ ๋ถ๋ชจ๋ฅผ Flex-container
, ์ํฅ์ ๋ฐ๋ ์์๋ค์ Flex-item
์ด๋ผ๊ณ ๋ถ๋ฅธ๋ค.
flex
๋ ์์ ์ ์ง๊ณ์์๊น์ง๋ง! ์ํฅ์ ๋ฏธ์นฉ๋๋ค.(์์์ ์๋๋๋ค!!)
๋๋ถ๋ถ์ ์ ๋ ฌ์ ํด์ฃผ๋ ์์ฑ๋ค์ ๋ถ๋ชจ์์ ์ปจํธ๋กค ํด์ฃผ๋ฉด ๋๋ค.
1. flex-direction
ํ๋ฆ์ ๋ฐฉํฅ์ ์๋ฏธํ๋ฉฐ, 4๊ฐ์ง์ ๋ฐฉํฅ์ด ์๋ค.
/* ๊ธฐ๋ณธ ๊ฐ์ด๋ฉฐ, float:left;์ ๊ฐ๋ค */
flex-direction: row;
/* ๊ธฐ๋ณธ ๊ฐ์ด๋ฉฐ, float:right;์ ๊ฐ๋ค */
flex-direction: row-reverse;
/* ๊ธฐ๋ณธ์ ์ผ๋ก ์ฃผ๋ฃจ๋ฃจ๋ฃฉ ์์ด๋ ๋ชจ์ต๊ณผ ๊ฐ๋ค */
flex-direction: column;
/* ์ญ์์ผ๋ก ์ฃผ๋ฃจ๋ฃจ๋ฃฉ ์์ด๋ ๋ชจ์ต๊ณผ ๊ฐ๋ค */
flex-direction: column-reverse;
justify-content
์ ๋ค์ด๊ฐ๊ธฐ ์์ main-axis
์ cross-axis
๋ฅผ ์์์ผ ํ๋ค.
์ด๋ flex-direction
์ผ๋ก ์ง์ ํด์ค๊ฒ๊ณผ ์ฐ๊ด์ด ์๋ค.
row
๋ก ์ค์ ํ ๊ฒฝ์ฐ, ์ด๋ก์์ด ๋ฉ์ธ์ถ, ๋นจ๊ฐ์์ด ๊ต์ฐจ์ถ์ด๋ค!!
column
์ด๋ฉด ๊ทธ ๋ฐ๋์ด๋ฉฐ, ๊ฐ ์ถ์ ์์์ ๊ณผ ๋์ ์ด ์๋ค.
flex
๋ฅผ ์ฐ๋ ์ ๋์ ์ธ ์ด์ ์ธ ์ ๋ ฌ๊ณผ ๋ฐฐ์น์ ๋ค์ด๊ฐ๊ธฐ์ ์์ ๋ฉ์ธ์ถ๊ณผ ๊ต์ฐจ์ถ์ ๋ค์ ํ๋ฒ ์ ๋ ํ์!
2. justify-content
main-axis
๋ฅผ ๊ธฐ์ค์ผ๋ก ์ ๋ ฌํ๋ค!!!(๊ฐ๋ก์ธ๋ก๋ก ์๊ฐ์น ๋ง๊ณ ๋ฉ์ธ ์ถ์ ์ ๋
ํ ๊ฒ!!!)
display: flex;
justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify-content: space-between;
justify-content: space-around;
์์ 3๊ฐ์ ๊ฐ์ ์ง๊ด์ ์ธ ์ดํด๊ฐ ๊ฐ๋ฅํ์ง๋ง, between๊ณผ around์ ์ฐจ์ด๊ฐ ๋ชจํธํ๋ค.
between
์ ์์ชฝ์ผ๋ก ์ญ ๋๋ฆฐ ๋ชจ์์ด๊ณ ,
around
๋ ๊ฐ ์์ดํ
๋ค ๋ง๋ค ์ข์ฐ๋ก ๋ชจ๋ ๋์ผํ ๋๋น๋งํผ์ ๊ณต๋ฐฑ์ด ์๊ธด๋ค.
(์ค๋ช
๋ณด๋ค ์ฌ์ง์ด ์ดํด๊ฐ ๋น ๋ฅด๋ค.)
3. align-items, align-content
align-items
๋ cross-axis
๋ฅผ ๊ธฐ์ค์ผ๋ก ์ ๋ ฌํ๋ค.
align-content
๋ flex-container
์ cross-axis
์ถ์ ์์ดํ
๋ค์ด ์ฌ๋ฌ์ค ์ผ๋ ์ฌ์ฉ ๊ฐ๋ฅํ๋ค. (align-self
๋ ์์์์์ ์ฐ๋ ์์ฑ์
๋๋ค. ์ด์ ํผ๋ํ์ง ๋ง์๋ค!!)
align-self
๋ ์์์์์ ์ฌ์ฉํ๊ณ , ๋ถ๋ชจ์ align-items
๋ฅผ ๋ฎ์ด ๋ฒ๋ฆฝ๋๋ค.
.container {
display: flex;
align-items: stertch; /* ๊ธฐ๋ณธ๊ฐ */
align-items: center;
align-items: flex-start;
align-items: flex-end;
}
4. flex-wrap
์์์ ํฌ๊ธฐ๊ฐ์ ๋ฌด์ํ๋๋ ๋ง๋๋์ ๊ด๋ จ๋ ์์ฑ์
๋๋ค.
์ฆ, ์์๋ค์ ํฌ๊ธฐ๋ฅผ ๋ฌด์ํ๊ณ ์์๋ค์ ์ฐ๋ถ์ํค๋๋
์์๋ค์ ํฌ๊ธฐ๋ฅผ ์ธ์ ํ๊ณ , ๋ถ๋ชจ์ ๊ณต๊ฐ์ด ๋ชจ์๋ผ๋ค๋ฉด ๋ค์์ค๋ก ๋ด๋ ค์ฃผ๋๋์ ์ฐจ์ด์
๋๋ค.
nowrap
์ด ๊ธฐ๋ณธ ๊ฐ์ด๋ฉฐ, ์ด๋ ๋ฌด์ํ๊ณ ์ฐ๋ถ์ํค๋ ๊ฐ์
๋๋ค.
wrap
์ ์ฌ์ฉํ๋ ๊ฒ์ด ๋ณด๋ค ๋ ์์ ์ ์ธ ๋๋์ด ๋ค๊ฒ์
๋๋ค.
flex-wrap: nowrap; /*default*/
flex-wrap: wrap;
flex-wrap: wrap-reverse;
์ ์๋ ๋ชจ๋ ์์ดํ
๋ค์ด ๋์ผ ๋๋น๋ฅผ ๊ฐ์ง ๊ฐ๋ค์ด์ง๋ง, wrap
๊ฐ์ ์ฃผ์๋๋ ์์ฃผ์๋๋์ ์ฐจ์ด์
๋๋ค.
์ : no-wrap
์๋ : wrap
wrap-reverse
๋ ์กฐ๊ธ ์ํ๊ฐ์ด ๋๋ ๋
์์
๋๋ค.
์์ ๋ชจ๋ ์์๋ฅผ ๋ฆฌ๋ฒ์ฑ ์ํค๋ ๊ฒ ์๋๋๋ค!!!
์ฐจ๊ณก์ฐจ๊ณก ์ ์์์ค ๋ค, ์ค๋ค๋ง์ ๋ฆฌ๋ฒ์ฑ ์ํต๋๋ค.
flex-basis
์์์์์ ์ฌ์ฉํฉ๋๋ค!!!!!
item
๋ค์ ํฌ๊ธฐ๋ฅผ ์ง์ ํ๋ค.flex-direction
์ ์ํฅ์ ๋ฐ๋๋ค.(row
๋ฉด ๋๋น,column
์ด๋ฉด ๋์ด)width
,height
๊ฐ์ ๋ฌด์๋ฉ๋๋ค.
order
์์์์์ ์ฌ์ฉํฉ๋๋ค!!!!!
flex-item
๋ค์ ์์๋ฅผ ๊ฒฐ์ ํ๋ค. ์์ ์๋ฏธ๋ก ์์๋ฅผ ๊ฒฐ์ ํ์ง ์์ต๋๋ค. ์์ ํฌ๊ธฐ๋ก ๊ฒฐ์ ํฉ๋๋ค. ์๊ฐ ์์ ์๋ก ๋ ์ฐ์ ์์๋ฅผ ๋ถ์ฌ ๋ฐ์ต๋๋ค. (์์๋ ์ฌ์ฉ์ด ๊ฐ๋ฅํฉ๋๋ค.)
๐ฎNew!!
display: flex;
๋ก ํด์ฃผ๊ณ ์ฐฝ์ ํญ์ ์ค์ฌ์ฃผ๋ ์ฝ๊ฐ์ ๋ฐ์ํ์ฒ๋ผ ๋ฆฌ์คํธ๋ค์ด ์ชผ๊ทธ๋ผ ๋ค๋๋ผ- ํ์ง๋ง ์ปจํ ์ธ ํฌ๊ธฐ๋ณด๋ค๋ ์์์ง์ง ์๋๋ผ..(๋น์ฐํ๊ฑด๊ฐ?)
dislay: inline-flex;
๋ก ํด์ฃผ๊ณ ์ฐฝ์ ํญ์ ์ค์ฌ์ฃผ๋ ์ค์ง์๊ณ ์ข์ฐ์คํฌ๋กค์ด ์๊ธฐ๋๋ผ
Author And Source
์ด ๋ฌธ์ ์ ๊ดํ์ฌ([TIL] CSS Breakdown (FLEX๐ค)), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://velog.io/@jay__ss/TIL-CSS-Breakdown-FLEX์ ์ ๊ท์: ์์์ ์ ๋ณด๊ฐ ์์์ URL์ ํฌํจ๋์ด ์์ผ๋ฉฐ ์ ์๊ถ์ ์์์ ์์ ์ ๋๋ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ ์ธ ๋ฐ๊ฒฌ์ ์ ๋ (Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค