[CSS] ๐ธFlexbox Froggy
2434 ใฏใผใ
ใใใใ๐ธใซใจใซใฒใผใ flexbox froggy๐ธFLEXBOXใๅๅผทใใพใใ.
ใจใชใผใฎDREAM CODE่ฌๅบงใ่ใใชใใๆฌๅฝใซๆ็ใงใ!ๆใใฆใใจใชใผ
โ ์ฐธ๊ณ ๋ด๊ฐ ๋ณด๋ ค๊ณ ํ๋ ์ ๋ฆฌ
๐งบ justify-content
ๆจช็ทไธใง่ฆ็ด ใไธฆในๆฟใใพใ.
flex-end: ์์๋ค์ ์ปจํ
์ด๋์ ์ค๋ฅธ์ชฝ์ผ๋ก ์ ๋ ฌํฉ๋๋ค.
center: ์์๋ค์ ์ปจํ
์ด๋์ ๊ฐ์ด๋ฐ๋ก ์ ๋ ฌํฉ๋๋ค.
space-between: ์์๋ค ์ฌ์ด์ ๋์ผํ ๊ฐ๊ฒฉ์ ๋ก๋๋ค.
space-around: ์์๋ค ์ฃผ์์ ๋์ผํ ๊ฐ๊ฒฉ์ ๋ก๋๋ค.
๐งบ align items
ๅ็ด็ทไธใง่ฆ็ด ใใฝใผใใใพใ.
flex-start: ์์๋ค์ ์ปจํ
์ด๋์ ๊ผญ๋๊ธฐ๋ก ์ ๋ ฌํฉ๋๋ค.
flex-end: ์์๋ค์ ์ปจํ
์ด๋์ ๋ฐ๋ฅ์ผ๋ก ์ ๋ ฌํฉ๋๋ค.
center: ์์๋ค์ ์ปจํ
์ด๋์ ์ธ๋ก์ ์์ ๊ฐ์ด๋ฐ๋ก ์ ๋ ฌํฉ๋๋ค.
baseline: ์์๋ค์ ์ปจํ
์ด๋์ ์์ ์์น์ ์ ๋ ฌํฉ๋๋ค.
stretch: ์์๋ค์ ์ปจํ
์ด๋์ ๋ง๋๋ก ๋๋ฆฝ๋๋ค.
๐งบ flex-direction
ไฝ็ฝฎๅใใใฎๆนๅใๆๅฎใใพใ.
โ Flex์ ๋ฐฉํฅ์ด column์ผ ๊ฒฝ์ฐ justify-content์ ๋ฐฉํฅ์ด ์ธ๋ก๋ก, align-items์ ๋ฑกํฅ์ด ๊ฐ๋ก๋ก ๋ฐ๋๋๋ค.
row: ์์๋ค์ ํ
์คํธ์ ๋ฐฉํฅ๊ณผ ๋์ผํ๊ฒ ์ ๋ ฌํฉ๋๋ค.
row-reverse: ์์๋ค์ ํ
์คํธ์ ๋ฐ๋ ๋ฐฉํฅ์ผ๋ก ์ ๋ ฌํฉ๋๋ค.
column: ์์๋ค์ ์์์ ์๋๋ก ์ ๋ ฌํฉ๋๋ค.
column-reverse: ์์๋ค์ ์๋์์ ์๋ก ์ ๋ ฌํฉ๋๋ค.
๐ order
flex่ฆ็ด ใฎ้ ๅบใๆๅฎใใพใ.
order: n (์ ์ ๋ชจ๋ ๊ฐ๋ฅ)
๐ align-self
ๆๅฎใใalign-itemsๅคใ็ก่ฆใใฆใๅ็ด็ทไธใงflex่ฆ็ด ใใฝใผใใใพใ.
flex-start: ์์๋ค์ ์ปจํ
์ด๋์ ๊ผญ๋๊ธฐ๋ก ์ ๋ ฌํฉ๋๋ค.
flex-end: ์์๋ค์ ์ปจํ
์ด๋์ ๋ฐ๋ฅ์ผ๋ก ์ ๋ ฌํฉ๋๋ค.
center: ์์๋ค์ ์ปจํ
์ด๋์ ์ธ๋ก์ ์์ ๊ฐ์ด๋ฐ๋ก ์ ๋ ฌํฉ๋๋ค.
baseline: ์์๋ค์ ์ปจํ
์ด๋์ ์์ ์์น์ ์ ๋ ฌํฉ๋๋ค.
stretch: ์์๋ค์ ์ปจํ
์ด๋์ ๋ง๋๋ก ๋๋ฆฝ๋๋ค.
๐งบ flex-wrap
flex่ฆ็ด ใ1่กใพใใฏ่คๆฐ่กใซไธฆในใพใ.
nowrap: ๋ชจ๋ ์์๋ค์ ํ ์ค์ ์ ๋ ฌํฉ๋๋ค.
wrap: ์์๋ค์ ์ฌ๋ฌ ์ค์ ๊ฑธ์ณ ์ ๋ ฌํฉ๋๋ค.
wrap-reverse: ์์๋ค์ ์ฌ๋ฌ ์ค์ ๊ฑธ์ณ ๋ฐ๋๋ก ์ ๋ ฌํฉ๋๋ค.
๐งบ flex-flow
flex-direction,flex-wrapใไธๅบฆใซไฝฟ็จใใพใ.
flex-flow: wrap column;
๐งบ align-content
ๅ็ด็ทไธใซไฝๅใชในใใผในใใใๅ ดๅใฏflex container้ใฎ้้ใ่ชฟๆดใใพใ.
flex-start: ์ฌ๋ฌ ์ค๋ค์ ์ปจํ
์ด๋์ ๊ผญ๋๊ธฐ์ ์ ๋ ฌํฉ๋๋ค.
flex-end: ์ฌ๋ฌ ์ค๋ค์ ์ปจํ
์ด๋์ ๋ฐ๋ฅ์ ์ ๋ ฌํฉ๋๋ค.
center: ์ฌ๋ฌ ์ค๋ค์ ์ธ๋ก์ ์์ ๊ฐ์ด๋ฐ์ ์ ๋ ฌํฉ๋๋ค.
space-between: ์ฌ๋ฌ ์ค๋ค ์ฌ์ด์ ๋์ผํ ๊ฐ๊ฒฉ์ ๋ก๋๋ค.
space-around: ์ฌ๋ฌ ์ค๋ค ์ฃผ์์ ๋์ผํ ๊ฐ๊ฒฉ์ ๋ก๋๋ค.
stretch: ์ฌ๋ฌ ์ค๋ค์ ์ปจํ
์ด๋์ ๋ง๋๋ก ๋๋ฆฝ๋๋ค.
align-items๋ ์ปจํ
์ด๋ ์์์ ์ด๋ป๊ฒ ๋ชจ๋ ์์๋ค์ด ์ ๋ ฌํ๋์ง๋ฅผ ์ง์ ํฉ๋๋ค. ๋ง์ฝ ์์๊ฐ ํ ์ค๋ง ์๋ ๊ฒฝ์ฐ, align-content๋ ํจ๊ณผ๋ฅผ ๋ณด์ด์ง ์์ต๋๋ค.
(+)24็ช
flex-flow: wrap-reverse column-reverse;
align-content: space-between;
justify-content: center;
๐
Reference
ใใฎๅ้กใซใคใใฆ([CSS] ๐ธFlexbox Froggy), ๆใ
ใฏใใใๅคใใฎๆ
ๅ ฑใใใใง่ฆใคใใพใใ
https://velog.io/@superahxd/CSS-Flexbox-Froggy
ใใญในใใฏ่ช็ฑใซๅ
ฑๆใพใใฏใณใใผใงใใพใใใใ ใใใใฎใใญใฅใกใณใใฎURLใฏๅ่URLใจใใฆๆฎใใฆใใใฆใใ ใใใ
Collection and Share based on the CC Protocol
Reference
ใใฎๅ้กใซใคใใฆ([CSS] ๐ธFlexbox Froggy), ๆใ ใฏใใใๅคใใฎๆ ๅ ฑใใใใง่ฆใคใใพใใ https://velog.io/@superahxd/CSS-Flexbox-Froggyใใญในใใฏ่ช็ฑใซๅ ฑๆใพใใฏใณใใผใงใใพใใใใ ใใใใฎใใญใฅใกใณใใฎURLใฏๅ่URLใจใใฆๆฎใใฆใใใฆใใ ใใใ
Collection and Share based on the CC Protocol