๊ฐ์ธ ๊ณต๋ถ๋ฅผ ์ํด ์์ฑํ์ต๋๋ค
์ผ๋ช flexbox๋ผ ๋ถ๋ฆฌ๋ Flexible Box module์ flexbox ์ธํฐํ์ด์ค ๋ด์ ์์ดํ ๊ฐ ๊ณต๊ฐ ๋ฐฐ๋ถ๊ณผ ๊ฐ๋ ฅํ ์ ๋ ฌ ๊ธฐ๋ฅ์ ์ ๊ณตํ๊ธฐ ์ํ 1์ฐจ์ ๋ ์ด์์ ๋ชจ๋ธ.
flexbox๋ฅผ 1์ฐจ์์ด๋ผ ์นญํ๋ ๊ฒ์, ๋ ์ด์์์ ๋ค๋ฃฐ ๋ ํ ๋ฒ์ ํ๋์ ์ฐจ์(ํ์ด๋ ์ด)๋ง์ ๋ค๋ฃฌ๋ค๋ ๋ป์ด๋ค.
โจ์ฐธ๊ณ โจ 2์ฐจ์ ๋ชจ๋ธ: ํ๊ณผ ์ด์ ํจ๊ป ์กฐ์ ํ๋ CSS ๊ทธ๋ฆฌ๋ ๋ ์ด์์
๐ฉ์ง์ค! flexbox๋ฅผ ์ ์ฉํ๋ ค๋ฉด, ์ ์ฉํ๋ ค๋ ์์์ display: flex;
๋ฅผ ์ ์ฉ์ํจ๋ค
flex-start
์์๋ค์ ์ปจํ
์ด๋์ ์ผ์ชฝ์ผ๋ก ์ ๋ ฌ.flex-end
์์๋ค์ ์ปจํ
์ด๋์ ์ค๋ฅธ์ชฝ์ผ๋ก ์ ๋ ฌ.center
์์๋ค์ ์ปจํ
์ด๋์ ๊ฐ์ด๋ฐ๋ก ์ ๋ ฌ.space-between
์์๋ค ์ฌ์ด์ ๋์ผํ ๊ฐ๊ฒฉ์ ๋๋ค.space-around
์์๋ค ์ฃผ์์ ๋์ผํ ๊ฐ๊ฒฉ์ ๋๋ค.#pond {
display: flex;
justify-content: flex-end;
}
#pond {
display: flex;
justify-content:center;
}
#pond {
display: flex;
justify-content: space-around;
}
#pond {
display: flex;
justify-content: space-between;
}
flex-start
์์๋ค์ ์ปจํ
์ด๋์ ๊ผญ๋๊ธฐ๋ก ์ ๋ ฌ.flex-end
์์๋ค์ ์ปจํ
์ด๋์ ๋ฐ๋ฅ์ผ๋ก ์ ๋ ฌ.center
์์๋ค์ ์ปจํ
์ด๋์ ์ธ๋ก์ ์์ ๊ฐ์ด๋ฐ๋ก ์ ๋ ฌ.baseline
์์๋ค์ ์ปจํ
์ด๋์ ์์ ์์น์ ์ ๋ ฌ.stretch
์์๋ค์ ์ปจํ
์ด๋์ ๋ง๋๋ก ๋๋ฆฐ๋ค.#pond {
display: flex;
align-items:flex-end;
}
#pond {
display: flex;
align-items:center;
justify-content: center;
}
row
์์๋ค์ ํ
์คํธ์ ๋ฐฉํฅ๊ณผ ๋์ผํ๊ฒ ์ ๋ ฌ.row-reverse
์์๋ค์ ํ
์คํธ์ ๋ฐ๋ ๋ฐฉํฅ์ผ๋ก ์ ๋ ฌ.column
์์๋ค์ ์์์ ์๋๋ก ์ ๋ ฌ.column-reverse
์์๋ค์ ์๋์์ ์๋ก ์ ๋ ฌ.#pond {
display: flex;
flex-direction:column;
}
#pond {
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
}
#pond {
display: flex;
flex-direction: column-reverse;
justify-content: space-between;
}
#pond {
display: flex;
flex-direction: row-reverse;
justify-content: center;
align-items: flex-end;
}
#pond {
display: flex;
}
.yellow {
order: 1; /* ๋
ธ๋ ๊ฐ๊ตฌ๋ฆฌ์ ์์๋ฅผ ๋ค๋ก ๋ฐ๊พผ๋ค */
}
#pond {
display: flex;
}
.red {
order: -1;
}
flex-start
์์๋ค์ ์ปจํ
์ด๋์ ๊ผญ๋๊ธฐ๋ก ์ ๋ ฌ.flex-end
์์๋ค์ ์ปจํ
์ด๋์ ๋ฐ๋ฅ์ผ๋ก ์ ๋ ฌ.center
์์๋ค์ ์ปจํ
์ด๋์ ์ธ๋ก์ ์์ ๊ฐ์ด๋ฐ๋ก ์ ๋ ฌ.baseline
์์๋ค์ ์ปจํ
์ด๋์ ์์ ์์น์ ์ ๋ ฌ.stretch
์์๋ค์ ์ปจํ
์ด๋์ ๋ง๋๋ก ๋๋ฆฐ๋ค. #pond {
display: flex;
align-items: flex-start;
}
.yellow {
align-self: flex-end;
}
#pond {
display: flex;
align-items: flex-start;
}
.yellow {
order: 1;
align-self: flex-end;
}
nowrap
๋ชจ๋ ์์๋ค์ ํ ์ค์ ์ ๋ ฌ.#pond {
display: flex;
flex-wrap: wrap;
}
#pond {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
#pond {
display: flex;
flex-flow: column wrap;
}
flex-start
์ฌ๋ฌ ์ค๋ค์ ์ปจํ
์ด๋์ ๊ผญ๋๊ธฐ์ ์ ๋ ฌ.flex-end
์ฌ๋ฌ ์ค๋ค์ ์ปจํ
์ด๋์ ๋ฐ๋ฅ์ ์ ๋ ฌ.center
์ฌ๋ฌ ์ค๋ค์ ์ธ๋ก์ ์์ ๊ฐ์ด๋ฐ์ ์ ๋ ฌ.space-between
์ฌ๋ฌ ์ค๋ค ์ฌ์ด์ ๋์ผํ ๊ฐ๊ฒฉ์ ๋๋ค.space-around
์ฌ๋ฌ ์ค๋ค ์ฃผ์์ ๋์ผํ ๊ฐ๊ฒฉ์ ๋๋ค.stretch
์ฌ๋ฌ ์ค๋ค์ ์ปจํ
์ด๋์ ๋ง๋๋ก ๋๋ฆฐ๋ค.align-content
๋ ์ฌ๋ฌ ์ค๋ค ์ฌ์ด์ ๊ฐ๊ฒฉ์ ์ง์ ํ๋ฉฐ, align-items
๋ ์ปจํ
์ด๋ ์์์ ์ด๋ป๊ฒ ๋ชจ๋ ์์๋ค์ด ์ ๋ ฌํ๋์ง๋ฅผ ์ง์ ํ๋ค. align-conten
t๋ ํจ๊ณผ๋ฅผ ๋ณด์ด์ง ์๋๋ค#pond {
display: flex;
flex-wrap: wrap;
align-content: flex-end;
}
#pond {
display: flex;
flex-wrap: wrap;
flex-direction: column-reverse;
align-content: center;
}
#pond {
display: flex;
flex-flow: column-reverse wrap-reverse;
justify-content: center;
align-content: space-between;
}
โ ๋ชฉํ!
justify-content
๊ฐ๋ก โ align-items
์ธ๋กflex-direction
๋ฐฉํฅ ์ง์ order
๊ธฐ๋ณธ ๊ฐ์ 0์ด๋ฉฐ, ์์๋ ์์๋ก ๋ฐ๊ฟ ์ ์๋คalign-self
align-items(์ธ๋ก ์ ๋ ฌ)์ ๊ฐ๋ค๋ก ์ง์ flex-wrap
์ค ๋ฐ๊ฟflex-flow
flex-direction+flex-wrapalign-content
์ฌ๋ฌ ์ค ์ฌ์ด์ ๊ฐ๊ฒฉ์ ์ง์