๐ด Wrapper ์์ฑ
display: flex;
flex-direction: row | column | row-reverse | column-reverse;
justify-content: flex-start;
align-items: flex-start; /* ํ ์ค์ธ ์์ดํ
์ ์์ง ์ ๋ ฌ */
align-content: flex-start; /* ๋ ์ค ์ด์์ธ ์์ดํ
์ ์์ง ์ ๋ ฌ */
/* flex๋ ๊ธฐ๋ณธ์ ์ผ๋ก ์์ดํ
์ ํ ์ค์ ๋ฐฐ์น์ํจ๋ค. */
/* ์์ดํ
๋ค์ด ํ ์ค์ ๋ค์ด๊ฐ๊ธฐ ์ด๋ ค์ฐ๋ฉด ํฌ๊ธฐ๋ฅผ ๋ณ๊ฒฝ์ํจ๋ค. */
flex-wrap: nowrap | wrap;
/* wrap ์์ฑ ์ ์ฉ ์, ์์ดํ
์ ํฌ๊ธฐ๋ฅผ ์ ์งํ๋ค. */
๐ Child ์์ฑ
/* ์์ง ๋ฐฉํฅ์ผ๋ก ํ๋์ child๋ง ๊ฐ์ด๋ฐ ์ ๋ ฌ */
align-self: flex-start;
/* ์์๋ฅผ ๋ณ๊ฒฝํ ์ ์๋ค. order -> HTML ์ฐ์ ์์๋ก ๊ฒฐ์ ํ๋ค */
order: 0 | 1;
/* ํ๋ฉด ํฌ๊ธฐ๋ฅผ ์ค์์ ๋, ๋น๋กํ๋ ๋งํผ ํ๋ฉด์ ์ค์ด๋๋ ์ ๋๋ฅผ ์ ํ ์ ์๋ค. */
flex-shrink: 0 | 1;
/* ํ๋ฉด์ ๋จ๋ ์ฌ๋ฐฑ์ด๋ ์ฌ์ ๊ณต๊ฐ๋ค์ ๊ฐ์ ธ์์ child์ ํฌ๊ธฐ๋ฅผ ๊ทธ๋งํผ ๋น๋กํ์ฌ ๋ํ๋ค. */
flex-grow: 0 | 1;
๐ก Froggy ์์
/* Level 10 */
#pond {
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
}
/* Level 17 */
#pond {
display: flex;
align-items: flex-start;
}
.yellow {
order: 1;
align-self: flex-end;
}
/* Level 18 */
#pond {
display: flex;
flex-wrap: wrap;
}
/* Level 19 */
#pond {
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
/* Level 23 */
#pond {
display: flex;
flex-wrap: wrap;
flex-direction: column-reverse;
align-content: center;
}
/* Level 24 */
#pond {
display: flex;
flex-direction: column-reverse;
flex-wrap: wrap-reverse;
justify-content: center;
align-content: space-between;
}
'CSS' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[ CSS ] Grid (0) | 2022.07.10 |
---|---|
[ CSS ] CSS ๊ณ ๊ธ ์ ํ์ (0) | 2022.04.22 |